Félix Gagnon-Grenier Félix Gagnon-Grenier - 14 days ago 5
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

display:inline-block
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.

* {
padding:0;
margin:0;
border:0;
border-spacing:0;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html {
height:100%;
}
body {
height:100%;
}
#left {
background-color: red;
width:20%;
height:100%;
}
#right {
background-color: green;
width:80%;
height:100%;
}
.horizontal {
display: inline-block;
}

Answer

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".

Example:

.horizontal {
  float: left;
}