I’m sure this is very simple. I’ve been accomplishing this for years with tables, but I have decided to leave tables behind and try to build this current site using CSS alone for layout.
I have attached what I want to accomplish:
Can anyone point me in the right direction or tell me how to do this? thanks in advance.
Overflow:hidden on a div without height forces whatever follows it downwards
ok thank you! trying it now.
25 views but so far no answers… I get the feeling that EITHER this is so easy that no one wants to bother, or more difficult than I may have initially thought.
You can put “float:left” on Div #3 - this should cause it to “expand” the way you want. “display:inline-block” also works, but I have had some problems with it creating undesired space at the top and bottom of the div.
I’ve actually wondered myself if there wasn’t some better way than the above, but these are the only solutions I’ve been able to find that work reliably.
that was it ! setting height to Auto on row 5 works perfectly !!! Thank you!
Nice looking site btw 
By “dynamically changing the content”, you mean with JS or AJAX, correct? So you would simply put a function to to toggle the display property from hidden to scroll back to hidden after any function call that changes the content?
Well, I use what I call Livescript, an Asynchronous (or synchronous if used with a setTimeout or setInterval) method that’s a mix of JS and server side languages. I developed it here in Sitepoint in 2003 before the term Ajax was even conceived.
[COLOR=#1337a5]http://www.sitepoint.com/forums/showthread.php?t=135179[/COLOR]
Very interesting (though pretty much over my head at the moment, I’m sorry to say.) But, to return to my earlier question, is the JS (or Livescript) problem the only drawback or side effect you know of that comes with this fix?
Yes, as far as I know
I’ve got the “overflow:hidden” in there, and it is indeed “hiding” the overflow, but I still can’t seem to get the div with “stuff” in it to push the layer below it down.
Here is my URL:
http://mediabreeze.com/index2.php
Height on row5 needs to be set to auto
Yep, that’s what I use. I had a problem if I was dynamically changing the contents though, as it stayed the same size. I overcome this by setting overflow to scroll and back to hidden with javascript
I think Shem’s question could be stated this way: “How do you force a div, without a specified height, to expand vertically to the height of its contents?” Are you saying that “overflow:hidden” accomplishes this? If so, that would be fantastic - much better than the fixes I’ve been using.