why can't I put a 30% wide div next to a 70% wide div and have them both inline?

Question

If I create a 30% wide div, inline-block next to a 70% wide div, they don't line up horizontally. I have to make them add up to less than 100%

html

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div>
  <div id="w70">  
    width 70%
  </div>
</div>

css

#wrapper{
  width:100%;
}
#w30{
  background:yellow;
  display:inline-block;
  width:30%;
}

#w70{
  background:pink;
  display:inline-block;
  width:70%;
}

jsfiddle

why is 30% + 70% seem to be wider than 100% ?

Answer 1

You are using inline-block, that calculates white spaces too. So either have your div elements on the same line or use something modern such as flexbox.

With inline-block (same CSS as you're using now):

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div><div id="w70">  
    width 70%
  </div>
</div>

With flexbox (same HTML as you're using now):

#wrapper{
  display:flex;
  width:100%;
}
#w30{
  background:yellow;
  width:30%;
}

#w70{
  background:pink;
  width:70%;
}

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div>
  <div id="w70">  
    width 70%
  </div>
</div>