2

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;
}
Community
  • 1
  • 1
Félix Adriyel Gagnon-Grenier
  • 8,422
  • 10
  • 52
  • 65
  • 1
    Personally, I would not use `inline-block`, but `block` instead. Add `position: relative` and `float: left` to `.horizontal` and it works... – BillyNate Jun 13 '15 at 19:19
  • possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Stickers Jun 13 '15 at 19:24
  • 1
    What Billy said is an alternative way doing it, it's not an answer to your question, it didn't explain why. – Stickers Jun 13 '15 at 19:29

2 Answers2

5

It has to do with display: inline-block which adds a small number of pixels between items. I've had this problem too.

From [CSS-Tricks] (https://css-tricks.com/fighting-the-space-between-inline-block-elements/)

Aaron Washburn
  • 300
  • 2
  • 10
  • 1
    None of the solutions are nice. As i recall I ended up not using inline-block for divs. You can display them as blocks, use absolute positioning or use some sort of front-end grid system (bootstrap, foundation, bourbon/neat) – Aaron Washburn Jun 13 '15 at 19:33
  • I really don't see why the bloat of a front-end grid is a better a solution. – BillyNate Jun 13 '15 at 19:45
  • 1
    I've used bootstrap a bit and some bourbon/neat. I'm not a huge fan of them especially bootstrap because it puts style back into the markup, but they are an option for handling this sort of thing and are quite popular. – Aaron Washburn Jun 14 '15 at 15:56
4

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;
}
BillyNate
  • 908
  • 5
  • 10