Dreamweaver - CSS div Layout Problem

Author

CSS div Layout Problem

RalphPaonessa

2005-08-08, 4:17 am

I am trying to lay out a page with CSS and div elements. I place div1 and div2
(widths set to 300px, margins and paddings 0) on the page, with nothing in
between and add a border and background colors to make them visible. As
desired, div1 appears with div2 below it, and no space in between.

After much fiddling, I realize that if the last element in div1 has a bottom
margin greater than 0, it pushes div2 down to create a gap equal to the margin.
E.g., if my last element in div1 is a paragraph with a 10px bottom margin, the
border and color of div2 appears (approx.) 10px below div1.

BUT ... this happens in Firefox and Netscape -- but not in IE6 (all on
Windows). Dreamweaver correctly predicts the Firefox/Netscape behavior in
Design View. And from searching the Web I gather that the Firefox/Netscape
rendering correctly follows the CSS specs, but IE goes its own way here
(although some have noted that IE's rendering is more logical).

So what is going on here? I'm trying to understand the CSS logic. Is the
Firefox/Netscape behavior A Good Thing? I don't mean to get religious here --
I'm just trying to understand how to think in CSS. I would have thought the div
would expand to include the margins of its contents, but apparently that's now
how CSS does it?

In practice, what is the best way to deal with this to get identical rendering
in IE et al.?

BTW, I noticed that I can solve my problem by setting p {bottom-margin: 0;}. I
had thought this would have reduced the space between paragraphs, but it didn't
appear to. Is all this actually some problem with default CSS margins for
paragraphs? I read that "all" CSS margins are 0 by default. But if I set top
and bottom paragraph margins to 0 then there's no space between paragraphs.
What actually causes the space between paragraphs? (Could this be where all the
Dark Matter in the Universe is hiding?)

Thanks.

jojo

2005-08-08, 7:17 am

Hi

Once you set a height that height should be respected, IE doesn't do
that and that is incorrect as you noted. Set a padding value on the
bottom of the div to achieve what you want.

You must also consider that any change in text size will allow the text
to flow out of your div in Firefox and compliant browsers, while IE will
incorrectly expand the div and make it taller to contain the content.

In an ideal world you would use the min-height property, though oddly
enough this is not supported in IE. You can feed a height into IE only
by using the * filter which is only seen by IE - below. Set the same
value using the min-height property for compliant browsers.

* html #yourdiv {
height: 12em; /*or whatever you need*/
}

--
Cheers jojo
Team Macromedia Member Volunteer for Dreamweaver MX
http://www.webade.co.uk
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------