Firefox vs IE in padding

[ishky1]

HI,

Sorry no web page to point to.

I have a two column page design using two floated divs:

div#left{
width: 50%;
float: left;
}
div#right{
width: 50%;
float: right;
}
All works well in both browsers and shows two columns side by side.
The problem comes up when I insert padding into the css. With the
padding IE renders the page with two column side by side. However in
Firefox there is an overlap and the right column is displayed below
the left.

My solution is to float both to the left and fiddle with the width
until both columns fit side by side. But I don't really like it. Can
somebody explain what Firefox is doing.

Thanks for the help,
Andy

 

[Jim Moe]

I have a two column page design using two floated divs:

div#left{
width: 50%;
float: left;
}
div#right{
width: 50%;
float: right;
}
All works well in both browsers and shows two columns side by side.
The problem comes up when I insert padding into the css. With the
padding IE renders the page with two column side by side. However in
Firefox there is an overlap and the right column is displayed below
the left.

First, use HTML 4.01 Strict for your DTD (doctype), and validate your
code. Otherwise you will have more of these kinds of problems.
The padding is in addition to the given width. The easiest way to allow
for this is to use % for the padding and verify the total div width plus
padding is 50%.

 

[dorayme]

Sorry no web page to point to.

I have a two column page design using two floated divs:

div#left{
width: 50%;
float: left;
}
div#right{
width: 50%;
float: right;
}
All works well in both browsers and shows two columns side by side.
The problem comes up when I insert padding into the css. With the
padding IE renders the page with two column side by side. However in
Firefox there is an overlap and the right column is displayed below
the left.

I would think that FF is correct for css 2. If both left and
right take up 50%, and there is added something extra (eg a 1 px
border or padding) in just one of these, then it must take up a
little more than the 50% you specified. Width, strange as it may
seem, mostly refers to the horizontal area for content.

 

[ishky1]

First, use HTML 4.01 Strict for your DTD (doctype), and validate your
code. Otherwise you will have more of these kinds of problems.
The padding is in addition to the given width. The easiest way to allow
for this is to use % for the padding and verify the total div width plus
padding is 50%.

I tried your suggestion and got it to work in Firefox. But in IE the
two columns take up less than 100%. I guess that forces me to choose
from the least ugly fix.

Thanks,
Andy

 

[Jonathan N. Little]

I tried your suggestion and got it to work in Firefox. But in IE the
two columns take up less than 100%. I guess that forces me to choose
from the least ugly fix.

If your page triggers MSIE's quirks mode that MSIE will *incorrectly*
add the padding within the DIV's width. A url would help your fix this...

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Thu, 27 Sep 2007 00:32:24
GMT (e-mail address removed) scribed:

I tried your suggestion and got it to work in Firefox. But in IE the
two columns take up less than 100%. I guess that forces me to choose
from the least ugly fix.

If you're sure you're using a correct strict doctype, try inserting an
additional div just inside each of the 2 floated divs and put the padding
on those inner divs - keeping the floats at 50% width.

 

[Jim Moe]

I tried your suggestion and got it to work in Firefox. But in IE the
two columns take up less than 100%. I guess that forces me to choose
from the least ugly fix.

Are you using the Strict doctype? That is very important for
cross-browser display uniformity. And validated code.
Without an URL to a test case there is little else to suggest.