Help me with this layout tutorial

Hi

I am heavily experiencing with layouts at the moments as part of
learning CSS. The following link has a tutorial for a 3 columns layout
with header and footer using floats. It is simple but something bugs
me.

Here is the link:

http://builder.com.com/5100-6371_14-5160911.html

Once you got the page loaded, scroll down to "view this example" which
is a blue link, click on it, you now see his example. View the source,
copy and paste it in whatever you use for that and run it on your HD.
So far so good, you get just like him. Now in your source add <p></p>
to the middle <div> where it says "Middle column text..."
So you now have for that middle <div>:

<div id="middle">
<p>Middle column text...</p>

Now save and run it and you will see a white gap between the header and
the middle <div>.
I have tested this in IE6, NN8 and firefox 1.0.7

What does this? The <p></p> element to code properly should be there,
but it displays better without it. Can anyone explain this or provide a
fix?
To somewhat provide a fix which I don't like, I added background-color:
aqua to the css of the body element and it filled the gap with aqua,
still I want to see my text starting right below the header and using
<p></p>.

Thanks to the pros

Patrick

"varois83" <varois83 (AT) netzero (DOT) net> kirjoitti
viestissä:1145321290.102065.126980 (AT) i39g2000cwa (DOT) googlegroups.com...

<snip>

Now save and run it and you will see a white gap between the header and
the middle <div>.

Margin or padding of <p>

try

p
{
margin: 0;
padding: 0 0 1em 0;
}

Or something in CSS and see what happens...

Wyrm & Neredbojias

Thanks to both of you for fixing it.

Best regards

Patrick