Why doesn't this look right?

Hello all,

OK. Just for fun, I'm writing a two column layout with a header at the top,
just to see if I can sit down and write it from scratch (as opposed to
copying a template). It basically consists of a header, right column and
left columed wrapped in a wrapper <div>. It all seems to line up, but it
also seems to have a quirk.

See here: www.sayatnova.com/frameless.htm. View the source to see the code.
It validates.

In IE the height of the left column, which would house a menu, is
significantly smaller than the right column - even though they both consist
of only a <p> tag with three words. Both of the <div>'s have 5px padding.
You can see that the right column obviously has much more than 5px of
top/bottom padding. I kind of expect both <div>'s to look like the left
column (menu div).

In Firefox, both div's are of equal height, but they both have significant
top/bottom padding, even though I specify only 5px.

I've tried setting height: auto and tried leaving the height spec out
altogether, but the behavior doesn't change. Also, I was suspicious of any
margins of the <p> tag but, assuming that IE applies some sort of default
margin to <p>, that would affect both <div>'s, not just one. What am I
overlooking? Is it an IE bug? Something in my CSS?

Again I'm just experimenting to learn. In the past, I've just copied 2 colum
layouts from CSS tutorial sites. I just want to try and write one from
scratch.
--
Viken K.
http://home.comcast.net/~vikenk

Deciding to do something for the good of humanity, Viken Karaguesian
<vikenkNO_SPAM (AT) NO_SPAMcomcast (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

www.sayatnova.com/frameless.htm.
snip
Also, I was suspicious of any
margins of the <p> tag but, assuming that IE applies some sort of default
margin to <p>, that would affect both <div>'s, not just one.

This *is* IE we're talking about. :-)

What am I
overlooking? Is it an IE bug?

Probably. IE can be pretty buggy when it comes to floats.

Something in my CSS?

Add

* {padding: 0; margin: 0;}

at the top of your CSS file. I always start my CSS with that - that way
it eliminates any default padding/margins browsers may have, and I can
set it all to whatever I want. In this case, it also fixes your problem.
:-)

--
Mark Parnell
================================================== ===
Att. Google Groups users - this is your last warning:
http://www.safalra.com/special/googlegroupsreply/

Add

* {padding: 0; margin: 0;}

at the top of your CSS file. I always start my CSS with that - that way
it eliminates any default padding/margins browsers may have, and I can
set it all to whatever I want. In this case, it also fixes your problem.
:-)

Thanks, Mark.

I added p { margin: 0; padding: 0; } to my css and the uneven height
went away. However, I still find it wierd that the box height was
uneven when IE was apply the default margin/padding to <p> tag. If they
were identical in html code, why the uneven size?

It must have something to do with the float. When I float the content
div left (so now both div's are floated left), the box sizes equalize.
Although if I left-float the content (right) div, I *must* specify a
width, otherwise it's not automatically filling the remaining width of
it's containing div. It only widens as much as it needs to accomodate
the text.

Thanks for the reply.

Viken K.