DIVS behaving unexpectedly

[alexpnd]

If you could please take some time to explain the following I would be grateful.

<div class="item">
<img src="item1.jpg" alt="Information" style="float:left"/>
<p> text</p>
</div>
<div class="item">
<img src="item1.jpg" alt="Information" style="float:left"/>
<p> text</p>
</div>
<div class="item">
<img src="item1.jpg" alt="Information" style="float:left"/>
<p> text</p>
</div>

The bottom line is that I assumed the parser would create a line break after each "item" div. However, I get something like this:13581

Does a float get cleared outside of it's parent? I'm assuming so.

Also. There is a white space between my header div and body div. However this white space is not present in IE, only firefox. I recall this being a common problem but can anyone give me the final word?

Lastly. I assumed that if I had a floated div, the next sibling div's width would be computed to fit the remaining parent width, however I find in firebug that it actually has it's full width computed and it is simply "overlapped" by the floated div. Is this correct?

Many many regards!
Alex Pineda

[Fang]

You need to clear the float (http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html):.item {overflow:hidden;}
There is a white space between my header div and body divShow the code you are using.

[alexpnd]

It's for a friend, please don't hate my noobiness.

http://amcoconcrete.ws/demo/

There's a margin at the top where there shouldn't be.

Also the div on the right side (#items) seems to underlap (?) the floated red div (#info).

[Fang]

There's a margin at the top where there shouldn't be.<img style="position:absolute; top:2px; left:233px;" src="helmet.jpg" alt="" />
Also the div on the right side (#items) seems to underlapThey appear to be butted together, not overlapping.