Carmen Carter wrote:
Margin values are added to your block element width, not included in that
width. So you've set a width of 49%, plus a margin of 2%, for a combined
width of 51% for each column.
Your total layout width is 102%, so it is not surprising that the float is
not working properly.
Try a width of 48% instead, and that should clear up your problem. That's
assuming no padding values or borders are involved, since they too are added
to the block element width. To calculate total widths, use this formula:
left margin width + left border width + left padding width + block width +
right padding width + right border width + right margin width = Total width
Carmen
On 10/11/05, Jørgen Farum Jensen <[EMAIL PROTECTED]> wrote:
I have a problem with the following css:
#colleft {
text-align:justify;
width:49%;
float:left;}
#colright {
text-align:justify;
width:49%;
float:left;
margin-left:2%;}
This a two-column layout which works well in for example Firefox, but not
so well in Internet Explorer, which insists on a sum of the widths which
is
smaller than 100 percent.
This makes it impossible to get the floated columns to line up with header
and footer, se example page at
http://www.webdesign101.dk/x/cssdiscuss/ex1.html
Internet Explorer is including the margin *inside the box width*, while
W3C-spec browsers (rightly) are not. This is why you're getting
different results. Carmen would be correct if *both* boxes had a 2%
margin, but because only one does (#colright), so this should sum to
100%. The escape character is handy What you can do is add:
width: 51%;
margin: 2%;
w\idth: 49%;
And IE will not parse the "w\idth" attribute, while FF, Saf, Opera, etc
will, and each will then correctly render the 49% width + 2% margin.
Alternatively, you can create an * html body #colright {} rule; for some
reason, IE accepts that there is a mysterious parent object above HTML
(which there isn't), and applies the rule, but it is ignored (rather,
applied to nothing) by all other browsers. Or you could just override
the #colright with a CSS2 selector: html > body #colright. Either way,
pass IE and everyone else different values, and you'll be off to the
races. There's Tantek's boxmodel hack, too, but I havee always found it
detrimental to css readability, but I think it's just how my brain
interprets it.
One of the above ideas is likely to work. Hope I hit the basics. I'm
sure there are examples of these and other hacks on the CSS-discuss wiki
and other sites. If I've missed anything, or missed the point entirely,
please let me know. ;)
Regards,
Derek
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
