Firefox vs IE in padding

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

Re: Firefox vs IE in padding

ishky1@gmail.com wrote:
>
> 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%.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Firefox vs IE in padding

In article
<1190832382.349870.285270@19g2000hsx.googlegroups.com>,
"ishky1@gmail.com" wrote:

>
> 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.

--
dorayme

Re: Firefox vs IE in padding

On Sep 26, 5:32 pm, Jim Moe wrote:
> ish...@gmail.com wrote:
>
> > 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%.
>
> --
> jmm (hyphen) list (at) sohnen-moe (dot) com
> (Remove .AXSPAMGN for email)

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

Re: Firefox vs IE in padding

ishky1@gmail.com wrote:

>
> 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...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Firefox vs IE in padding

Well bust mah britches and call me cheeky, on Thu, 27 Sep 2007 00:32:24
GMT ishky1@gmail.com scribed:

>> > 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%.
>
> 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.

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: Firefox vs IE in padding

ishky1@gmail.com wrote:
>>
>> 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.
>
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.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)