Wrapper width doesn't fit 2 columns of 50%

Question

I have set a page wrapper of 960px width. I created 2 blocks to fill up the wrapper width, so I set the width of a seperate block to 50% but the two blocks don't fit side to side in te wrapper.

I guess it has to do with the 1px solid border of a seperate block. Is it that a block with 1px border will be a 50% width + 1px border all around?

How do I solve this problem without deleting the 1px border?

score 7 · Answer 1 · answered Dec 26 '12 at 19:51

7

If you do not need to support IE7 you should use:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

This box model adds the border and padding inside the width instead of outside.

box models

For more information there is a great article at css-tricks.com.

answered Dec 26 '12 at 19:51

JimmyRare

3,958
2
20
23

This is the best option. I use this all the time – Cody Guldner Dec 26 '12 at 19:53

Chanckjh · Answer 2 · 2012-12-26T20:26:53.877

2

don't use percent then. use 476px width on both div and 1px border. You could also use margin: -1px;

edited Dec 26 '12 at 20:26

answered Dec 26 '12 at 19:48

Chanckjh

2,587
2
22
28

1

+1. This makes more sense to me, and will work in any browser. If the parent container is pixels then percentage widths don't bring any benefits unless your container size changes regularly. – Hux Dec 26 '12 at 20:03
This is ok. But for responsive solutions you'll often want to use percentages. – JimmyRare Dec 26 '12 at 20:21
you could also use `margin: -1px` – Chanckjh Dec 26 '12 at 20:26
this is actually the only solution that worked for me.. the one above didnt work having 50% width in 2 divs next to another. – Cynthia Sanchez Mar 29 '16 at 18:19

score 1 · Answer 3 · edited May 23 '17 at 12:15

The right answer is this:

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

But, if you want to keep your code clean/easy to read (at least in Dev mode), you can remove the whitespaces via css using white-space so you can keep your pretty HTML layout. Don't forget to set the white-space back to normal again if you want your text to wrap inside the columns.

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

Sources: https://stackoverflow.com/a/6872020/2208466 and https://stackoverflow.com/a/10592283/2208466

Wrapper width doesn't fit 2 columns of 50%

3 Answers3