Fit 3 elements in the same line

Question

I have 3 elements in HTML as follows:

.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}

<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>

This should fit in the 100% width of the container (<body> or any other <div>). However the .sidebar is being dropped to the next line. I tried to setup border, margin and padding to 0 with the !important definition (just to test) but the result is the same. How can I fit this 3 elements in the same line keeping the width property?

Thanks in advance for your answers.

[Add `display: flex` to the container](http://stackoverflow.com/a/32122011/3597276). — Michael Benjamin, Aug 22 '16 at 02:57

score 4 · Accepted Answer · answered Aug 22 '16 at 02:58

As someone else mentioned, the issue is that when using display: inline-block, white-space - even between element tags - is accounted for in rendering. There are a few ways to get around this.

Setting display: table-cell rather than inline-block can work in a simple situation like this; just note that it prevents the blocks from wrapping
You can set font-size:0; on the parent to get rid of the whitespace, but you'll have to reset it on all the direct children.
Unless you have to support pre-IE10 browsers, I'd recommend flexbox here! You may need to add some browser prefixes, but the base would look like this (name your parent element something better than 'parent', though!):
```
.parent { display: flex; }
.navigation, .sidebar { flex: 1 }
.content { flex: 2 }
```
What that snippet is saying is "make the children fit, and make .content twice as big as the other two".

score 0 · Answer 2 · answered Aug 22 '16 at 02:45

Even though you removed the padding, margin, and border, inline elements are actually sensitive to white space in the code itself. Remove that and they line up:

.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
}

<nav class="navigation">Navigation</nav><section class="content">Section</section><aside class="sidebar">Aside</aside>

score 0 · Answer 3 · answered Aug 22 '16 at 02:49

When you're using display inline-block, it takes the space in your code as a character(space), so, you have 100% + the space required for 2 characters, you could keep the formatting of your code and ¨remove¨ the space between your containers setting the font-size of the parent to 0

.container{
    font-size:0; 
}
.container *{
    font-size:12px;
}
.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}

<div class="container">
<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>
</div>

this option + j08691 and @kyojimaru are the three most common options to remove spaces in containers when you´re using display: inline-block — kamus, Aug 22 '16 at 02:54

score 0 · Answer 4 · edited May 23 '17 at 12:08

It's because you're using the style of display:inline-block which will recognize and create a space between element if your code have a space (either space, or new line), so what you need to do is just remove the space like answered by j08691 here

Or you can either remove the spacing by using a comment like this one

.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}

<nav class="navigation">Navigation</nav><!--
--><section class="content">Section</section><!--
--><aside class="sidebar">Aside</aside>

Or other way around is using the style margin like in this example, the background is used to visualize the size of the the inline-block element only

.navigation {
  display: inline-block;
  width: 25%;
  margin: 0 -0.4em 0 0; background: red;
}
.content {
  display: inline-block;
  width: 50%;
  margin: 0 -0.4em 0 0; background: green;
}
.sidebar {
  display: inline-block;
  width: 25%;
  margin: 0 -0.4em 0 0; background: blue;
}

<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>

Fit 3 elements in the same line

4 Answers4