Question

I feel like a competent programmer, but I am terrible at CSS. I read about float and clear and display: inline-block and can understand the material, but I still can’t apply this to my own designs. I think my incompetence tends to frustrate me, which tends to become counterproductive quickly. That being said, nothing should stop you from trying (!) so…

My layout is essentially:

 _____________  
|         | v |
|         | e |
| big_div | r |
|         | t |
|_________|___|
|   lower     |
|_____________|

I want the div labeled vert and the div labeled lower to “stick” to the big div. To nestle together like cats and mice in winter. The following accomplishes that if the sizes are fixed:

<div id="big_div" style="float:left"></div>

<div id="vert" style="float:left"></div>

<div id="lower" style="clear: left"></div>

This shows exactly what I want, but as I said, only if I fix the sizes. How do I make them scale with the growth of big_div (since its contents are of arbitrary size?
I want them to scale with the size of big_div.

Answer 1

Use a container around big_div and vert and apply Faux Columns to it. lower should then handle itself either inside or outside of the container. Let me know if you need an example.

Example added: http://imaginekitty.com/cssExamples/cats/cats.html