[thelist] CSS: div background color discrepancy

[ben morrison]

On 12/7/06, Joel D Canfield <joel at spinhead.com> wrote:
> > sadly, removing the padding doesn't fix the issue in IE7.
>
> and, while I'm at it, any tips on why FireFox is the only one that
> *doesn't* get this right?
>
>     http://www.intranetintelligence.com/ii/intranet/
>
> in FF2, the subnav images run right down the center of the page, and the
> content is +/-110% of the page width, bleeding off the left edge.

Ive always found that a float:right needs to precede a float:left;

Change these styles:

/* removed padding added width */
#content {
color:inherit;
background-color:#ffffff;
margin:0px;
width:100%;
border:0px;
clear: both;
float:left;
}

/* float left */
#intranetmeat {
text-align:left;
padding:0px 0;
width:79%;
float:left;
}

If you need a gap between them then change #intranetnav

#intranetnav {
width:19%;
float:left;
margin-right:2%;
}

This now adds upto 79+19+2 = 100, due to rounding differences[1] it
would be safer to change the 79 to 77. Because we have added a right
margin to a left floated element this also stops the IE double float
margin bug[2].

If you need to add padding its safer to do this to the children
because of quirky box-models, #intranetnav use a <p> inside (should do
anyway).

#intranetnav p {margin-left:16px;}

ben
[1]http://www.positioniseverything.net/explorer/percentages.html
[2]http://www.positioniseverything.net/explorer/doubled-margin.html

-- 
Ben Morrison