Trouble with inline-block, side by side content holders and 100% width

Question

Why don't the elements below show up side-by-side? I can change the left to width: 29% and it works but then there is a tiny gap. Why can't they add up to 100%? Is there a fix for this?

@media all {
    body,html {
        margin:0; padding:0;
    }
    #content {
        position: absolute;
        width: 8.5in;
        left: 50%;
        margin:  0 0 0 -4.25in;
        padding: 0;
    }
    #left {
        width: 30%;
        display: inline-block;
        background-color: lightgray;
    }
    #right {
        width: 70%;
        display: inline-block;
        background-color: cornflowerblue;
    }
}

<body>
    <div id="content">
        <span id="left">
            left
        </span>
        <span id="right">
            right
        </span>
    </div>
</body>

Think as `inline` things as if they were text. For example a `p` element, `h1`, `h2`, `span`, etc. In those the inner elements are the characters, and there is always a tiny space between characters. Same happens with `inline-block` divs. Below are the answers on how to fix it — pablito.aven, Mar 23 '17 at 19:46

score 2 · Accepted Answer · answered Mar 23 '17 at 19:43

Because inline elements are sensitive to white space in your code. So just remove it.

body,
html {
  margin: 0;
  padding: 0;
}

#content {
  position: absolute;
  width: 8.5in;
  left: 50%;
  margin: 0 0 0 -4.25in;
  padding: 0;
}

#left {
  width: 30%;
  display: inline-block;
  background-color: lightgray;
}

#right {
  width: 70%;
  display: inline-block;
  background-color: cornflowerblue;
}

<div id="content">
  <span id="left">
            left
        </span><span id="right">
            right
        </span>
</div>

score 2 · Answer 2 · answered Mar 23 '17 at 19:43

It's space between elements. You can set font-size: 0; for container and set required size for children:

http://codepen.io/themeler/pen/yMENgZ

#content {
    font-size: 0;
}
#left {
    font-size: 18px;
}
#right {
    font-size: 18px;
}

Or use floats for that if you don't wan't to re-set font-size.

score 0 · Answer 3 · answered Mar 23 '17 at 19:46

<div id="content">
        <span id="left">
            left
        </span>
        <span id="right">
            right
        </span>
    </div>   



 #left {
            width: 30%;
            display: inline-block;
            background-color: lightgray;
            float:left;
        }
        #right {
            width: 70%;
            display: inline-block;
            background-color: cornflowerblue;
            float:left;
        }

Fiddler https://jsfiddle.net/d0r81820/

Trouble with inline-block, side by side content holders and 100% width

3 Answers3