How do I make this div longer???

[jayeskreezy]

Here is a pic of a screenshot of some of the page with the div on it

....the div is on the left (green part )...I want it to extend the entire length of the page...i have a stylesheet attached to it, but I just cant figure it out....

http://www.geocities.com/jayedooey/sitecapture.jpg

this is the stylesheet (http://www.geocities.com/jayedooey/caddie.css)

thanks macrumors :)

[mnkeybsness]

make it a background image for whatever div encloses the left column and the main copy... it's called 'faux columns' look it up on google or a list apart.

[panphage]

make it a background image for whatever div encloses the left column and the main copy... it's called 'faux columns' look it up on google or a list apart.
Yep, this is the only way, the guy at simplebits does it, use his technique. Browsers don't support extending containing elements vertically beyond what it takes to contain the child element's contents.

[ChicoWeb]

Can't you set the margin to 0?

[mnkeybsness]

no... margins do not change height

[panphage]

Can't you set the margin to 0?
Like the man said, no. A container cannot be made vertically larger than it's contents reliably. You can set some bottom padding on the last contained element, but that's not likely to sync up to your other div, at least not in any flexible way. The simplebits guy has the only solution I've ever heard of with the fake columns using a background image. http://www.alistapart.com/articles/fauxcolumns/

Here's another take on the same idea: http://www.pixy.cz/blogg/clanky/css-3col-layout/

Or you can do what I used to do at turtleneck.net, just make the background color of the body the same as your short column. This is a bit more limited in it's potential, but doesn't require any fixed widths at all.

[jayeskreezy]

OHHH thanks yall...i would have never figured that out

[Mitthrawnuruodo]

There is no problem making a div 100% in height...

Something like:
div.sidebar {
position: fixed;
width: 10em; height: auto;
top: 0; right: auto; bottom: 0; left: 0;
background: green;
}...should make the trick (you might hace to play a bit with the numbers...)

Check out more about (fixed) positioning of divs (http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning)...

[Rower_CPU]

There is no problem making a div 100% in height...

Something like:
div.sidebar {
position: fixed;
width: 10em; height: auto;
top: 0; right: auto; bottom: 0; left: 0;
background: green;
}...should make the trick (you might hace to play a bit with the numbers...)

Check out more about (fixed) positioning of divs (http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning)...

Yeah, but then you'd have to do all kinds of gymnastics to get around the fact that you just made an element that should scroll with the page not do its expected behavior in most everything but IE.

[jayeskreezy]

thanks for the help yall...i found out the easiest way for me to do what I needed it to do was to place the divs in a two column table...it made everything much faster and simpler :)

[Mitthrawnuruodo]

Yeah, but then you'd have to do all kinds of gymnastics to get around the fact that you just made an element that should scroll with the page not do its expected behavior in most everything but IE.You don't need to go with position: fixed;, and as long as it's fixed, when you scroll, it will stay put, at least using Firefox and Safari, don't actually know about IE, as there are issues with fixed positioning and IE... but if I understand you correctly, and this sidebar will stay put in IE (as it actually should), then there really is noe problem... :)

[Rower_CPU]

You don't need to go with position: fixed;, and as long as it's fixed, when you scroll, it will stay put, at least using Firefox and Safari, don't actually know about IE, as there are issues with fixed positioning and IE... but if I understand you correctly, and this sidebar will stay put in IE (as it actually should), then there really is noe problem... :)

Yes, IE does it wrong and gives you the behavior you want and compliant browsers do it right and don't give you the behavior you want - not a good solution.

[Mitthrawnuruodo]

Yes, IE does it wrong and gives you the behavior you want and compliant browsers do it right and don't give you the behavior you want - not a good solution.I don't understand... :confused:

I use divs with fixed positioning for my new home page design (http://www.geek.no/___nye/) (it's a work in progress, so be gentle with me... ;)). I try to get the menu bar at top, and the bottom bar to stay put, and just scroll the middle div, and it seems to work fine in Firefox and Safari on Mac...

...and according to the css standard (http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning), "fixed boxes do not move when the document is scrolled", and that's exactly the behaviour I'm trying to achieve...

[Rower_CPU]

Sorry, too many negatives in my reply - it's easy to get turned around. :)

When I say "not the behavior you want" in this context I'm referring to a typical navigational column that scrolls with the page - this is what I'm pretty sure the original poster had in mind. The irony of the fixed position solution for this problem is that IE, in ignoring the fixed positioning, would give you the behavior you expect.

Another thing to note with the solution you suggested is that it would only be 100% of the viewport, not necessarily 100% of the content area. But then we're off on another tangent and he's decided to go with icky tables anyway. :p

[Mitthrawnuruodo]

But then we're off on another tangent and he's decided to go with icky tables anyway. :pAh, yes tables... just what I try to avoid with my new site design... ;) :cool: