gap between two 50% width divs

Question

I have a container <div> with a width of 181px.

I have two child <div> elements in my container div each with a width of 50%.

My problem is that each of my child <div> elements has a width of only 90px, resulting in a 1px gap between the two.

Any suggestions for removing the gap?

Do they have a `90px` width or `50%` width? Which do you put in the code? — Devin Burke, Sep 10 '11 at 05:00

score 5 · Accepted Answer · answered Sep 10 '11 at 05:07

5

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

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

answered Sep 10 '11 at 05:07

Devin Burke

13,642
12
55
82

score 1 · Answer 2 · answered Sep 10 '11 at 05:03

1

style them as floats?

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

answered Sep 10 '11 at 05:03

Devin Crossman

7,454
11
64
102

+1 Yeah, I'm going to go with the floats. Before I had the child div's absolutely positioned on their corresponding left and right sides. I realize now that floating them left will remove that gap rather than separating the two. Thanks! – Web_Designer Sep 10 '11 at 05:07

score 1 · Answer 3 · answered Sep 10 '11 at 05:10

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.

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

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?

edited May 23 '17 at 11:51

Community

1
1

answered Sep 10 '11 at 05:19

Adnan Bhatti

3,410
4
25
38

gap between two 50% width divs

4 Answers4

Linked