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:zmzf3c.jpg

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:

.item {overflow:hidden;}

There is a white space between my header div and body div

Show 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 underlap

They appear to be butted together, not overlapping.