Posted by Jim Moe on 09/26/07 21:32

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)

[Back to original message]