at least i think it's a stupid little css problem ... i've attached 3 png's so you can see the problem i'm trying solve.
what i'm doing is i have a DIV that holds an icon that's floated to the left and another DIV that houses a message. these two DIV's are then sorrounded by a DIV that's supposed to put a border around everything (the icon and the message).
look at the png named "good" ... that looks fine. the text wraps around the floated icon sorta like what you might see in a newspaper, which is the effect that i'm going for. however, when you widden the window you get "no-good." the border that's supposed to go around everything now intersects the icon. now if i had enough text in the message, no matter how wide the window is, the text would always force the border to sorround everything. but i can't always be positive that the amount of text would always match what is needed.
now take a look at "fixed.png" ... this is how i would like it to look. the border always sorrouinding everything. now i was under the impression that when a DIV sorrounds another DIV, the outer most DIV takes on the shape of the DIV inside (the basic box object model). this doesn't seem to be the case with a div that's floated though. it always seems to hang outside of the outer most DIV, and i think it's a behavioral issue.
my question is: is there a style property that i must invoke on the outer most DIV to make it display this way? or is what i'm attempting to do impossible? i don't think it should be impossible or i would deem that as a drastic flaw in css.
i'll also post my code:
thanks for any feedback, except telling me that my color scheme is lousy. i'm aware of that; i use high-contrast colors in the implementation phase so i can see exactly what is going on.
<div style="border:#ff0000 solid 1px"><!-- full wrapper -->
<div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px"><!-- float wrapper -->
<div><img alt="image" src="img.bmp"></div>
<div style="background-color:#cccccc; margin-top:1px"><!-- caption wrapper -->
</div><!-- end caption -->
</div><!-- end float -->
<div style="background-color:#0000ff"><!-- message area -->
<div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div>
</div><!-- end message -->
</div><!-- end full wrapper -->