Gap Between Two 50% Width Divs

I have a container

with a width of 181px. I have two child

elements in my container div each with a width of 50%. My problem is that each of my child

Solution 1:

Set the width of one div as 50% and the other can use the standard block behavior of consuming the rest of the width:

<divstyle="width: 181px;"><divstyle="width: 50%; float: left;"></div><div></div></div>

Solution 2:

style them as floats?

<divstyle="width:181px;border:1px solid;height:100px;"><divstyle="width:50%;background:#F00;height:100%;float:left;"></div><divstyle="width:50%;background:#00F;height:100%;float:left;"></div></div>

Solution 3:

You can't split 181 pixels in half. A pixel is a pixel on a display and you can't get 2 50% elements to split the 181px in half. One needs to be 90px and one needs to be 91px.

If you float them both to the same direction, either left or right, the gab between them would go away but you would probably still have a 1px gap on the other side--if that matters. If you have borders on these elements and you're using floats then you'll have a whole new set of cross-browser issues. Make sure you do some cross-browser testing.

Solution 4:

Well the value get rounded to integer.

Here is a very good thread which goes into much more detail.

Are the decimal places in a CSS width respected?

Share