I am trying to get a div that resides in a container div to scale the container divs height when the div inside the container gets taller. When the height of the div inside the container gets taller than the container itself it just moves past the bottom of the container. I want the container to scale with the contained div. How do I do this in CSS?
+1
A:
You just need to give height property by percent such as:
percent { display:block:height:100%; } as your div stands in html:
<div class="percent"></div>
Myra
2009-08-06 18:40:00
This does not address his problem, which is unfortunate because it appears you put quite a bit of effort into the answer. Put a height of 500px on #container and you'll realize.
Josh Stodola
2009-08-06 19:26:05
Not sure I understand his problem as well as you then. Questions without code = open to interpretation.
hobodave
2009-08-06 19:56:51
My personal favorite solution to this problem is to add a clearing element at the end of your floated elements. If you add <div style="clear:both;"></div> right before you end your container that will set its height correctly. Don't have to use any CSS hacks, but it does add extra elements to your HTML.
dmertl
2009-08-06 22:43:38
A:
If you mean "scale" as in just simply expanding, perhaps I read your description as the container div having a height of, say, 500px, and the contained divs will push this out more if they grow too large. In that case, perhaps you can use min-height instead?
min-height: 500px;
If you mean "scale" as in the container div is 500x500px, the contained takes up an initial height of 200px that expands to 400px with more content, which pushes the container div to 1000x1000px (akin to zooming/enlarging), then that might be more complicated.
RoyalKnight
2009-08-23 22:02:15
A:
OMG you rock i have looked everywhere for a fix that actually works, and this does. thanks
Winter
2010-08-25 00:24:13