Posted by Neredbojias on 09/27/07 13:08

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.

[Back to original message]