Posted by ishky1@gmail.com on 09/27/07 00:32

On Sep 26, 5:32 pm, Jim Moe <jmm-list.AXSPA...@sohnen-moe.com> 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

[Back to original message]