Stylesheets - Firefox en Opera: 1 pixel gap between 2 div blocks with width set to 50%

Author

Firefox en Opera: 1 pixel gap between 2 div blocks with width set to 50%

Veerle

2005-10-28, 6:39 pm

Hi,

I have 2 div blocks with each div taking up half of the page width. So
in the CSS they both have width: 50%. See
http://home.scarlet.be/~vv991306/leftright.html

In Mozilla Firefox and Opera, depending on the width of the browser
window, sometimes there is a 1 pixel gap between the 2 div blocks. In
Internet Explorer, this is never the case.

I think I know why the gap is sometimes there: Firefox and Opera
probably calculate the width of 1 div block as page width divided by 2.
If the page width is an even number, then the sum of the 2 widths
equals to the page width. But if the page width is an odd number then
the sum of the 2 widths + 1px = page width. This probably is the reason
for the 1 pixel gap.

The question is: anyone knows of a way to avoid this problem? I find
setting both one of the div widths to 51% not a nice solution, because
I want my two blocks to have equal widths and 51% makes quite a big
difference.

Any ideas?

Veerle

Els

2005-10-28, 6:39 pm

Veerle wrote:

> Hi,
>
> I have 2 div blocks with each div taking up half of the page width. So
> in the CSS they both have width: 50%. See
> http://home.scarlet.be/~vv991306/leftright.html
>
> In Mozilla Firefox and Opera, depending on the width of the browser
> window, sometimes there is a 1 pixel gap between the 2 div blocks. In
> Internet Explorer, this is never the case.
>
> I think I know why the gap is sometimes there: Firefox and Opera
> probably calculate the width of 1 div block as page width divided by 2.
> If the page width is an even number, then the sum of the 2 widths
> equals to the page width. But if the page width is an odd number then
> the sum of the 2 widths + 1px = page width. This probably is the reason
> for the 1 pixel gap.
>
> The question is: anyone knows of a way to avoid this problem? I find
> setting both one of the div widths to 51% not a nice solution, because
> I want my two blocks to have equal widths and 51% makes quite a big
> difference.
>
> Any ideas?

You'll have to play with it a little, but I've noticed that it makes a
difference to set the width to auto and define the margin in
percentage, or vice versa. Maybe setting each div to auto and the
respective right or left margin to 50% does the trick. (maybe not)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -