Alvaro Pedraza Alvaro Pedraza - 4 months ago 13
CSS Question

Fit 3 elements in the same line

I have 3 elements in

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 (
or any other
). However the
is being dropped to the next line. I tried to setup border, margin and padding to 0 with the
definition (just to test) but the result is the same. How can I fit this 3 elements in the same line keeping the

Thanks in advance for your answers.


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.

  1. 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
  2. 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.
  3. 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".