Forum Moderators: not2easy
/*Main content pain (right)*/
#content
{
width: 74%;
font-family: "sans serif", Arial;
font-size: 16px;
font-style: italic;
text-align: left;
margin-left: 22%;
}
############################
HTML
<body >
<div id="main">
<div id="top">
</div>
<div id="left">
</div>
<div id="content">
</div>
<br style="clear:both" />
<div id="bottom">
</div>
</div>
</body>
Thanks in advance
Pat
A couple of notes:
You don't need to put any think after 0 in places like this:
margin: 0;
Where I put one, I usually put both margin and padding, like this:
margin: 0;
padding: 0;
In general, I wouldn't use this:
<br style="clear:both" />
I'd put the clear: both on the bottom css. If that doesn't work, I'd probably add a <hr> that has clear: both, like this:
hr.clearfloat { /* used to be sure floats finish before next lower div starts */
visibility: hidden;
clear: both;
height: 0;
border: 0;
margin: 0;
padding: 0;
}
yet IE 6 seems to add both together and put a 4% margin in the left with none in the right
That's very close to what is happening. Actually, IE is applying both margins, but it is doubling the left margin because the element to which the margin applies is floated left.
This is a well-documented IE bug. Check out PIE's lucid description of it here: Doubled Float-Margin Bug [positioniseverything.net].
Add display:inline; to the margined-and-floated element (#main in your layout) to fix it.
cEM
