I'm trying to do good by using more CSS/Divs and less tables.
However, I'm often having this problem: When I create a DIV and put more DIVs inside them, I assume that the outer div will surround the inner divs. However this is not what happens.
<div style="width:100%; border:thin; border-style:solid; border-color:#9B370C; height:auto;"> <div style="float:left;"> some image </div> <div style="float:right;"> some text </div> </div>
I expected the above to create a border around the whole thing, but instead I get this (the border looks like a line):
Try adding "overflow:auto;" to your outer div.
Have a look here for more information (see the section titled "Float Clearing"): http://css-tricks.com/the-css-overflow-property/
You could use any one of the clearing of floats, each technique has it's pro's and cons. There is also the option of using CSS 2.1 content-generation: http://www.positioniseverything.net/easyclearing.html
An important note is that this behavior isn't a bug or "wrong". This is logically correct according to the standards of the Visual Formatting Model. Floated elements (as positioned elements) exist in their own space, outside the normal flow of the page. The wrapping div of one or more floated elements shouldn't recognize it's children because they exist in their own "float space". That's why it works to also float the wrapper and teleport it to the same dimension as it's children. Good luck!