Félix Gagnon-Grenier Félix Gagnon-Grenier - 10 months ago 52
CSS Question

How to make two divs of a total of 100% width fit in the screen

here is a fiddle

I want two divs side by side occupying all the width of the window. I use

on them so that they behave horizontally.

<div id="left" class="horizontal">hello</div>
<div id="right" class="horizontal">world</div>

The problem is that when I set their width to equal 100% (left at 20% and right at 80%) they take larger than the screen, and the div on the right gets pushed under the other one.

I get around this by setting the width smaller than 100% (19% and 79%) but this has some minor problems later on, sometimes putting unwanted spaces where I do not want it.

What am I missing to make it that my divs get along horizontally while using 100% of the screen?

I have seen the tricks listed here, as well as in this question... and most of them are so ugly I still prefer using a less than 100% width.

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
html {
body {
#left {
background-color: red;
#right {
background-color: green;
.horizontal {
display: inline-block;

Answer Source

If you don't necessarily need to use inline-block I would recommend to use block instead. block is the default value for the display of a div, so you do not have to explicitly set it. Just set the float to left and you won't have to "fight the space between inline block elements".


.horizontal {
  float: left;