Create three columns layout using inline-block.

Question

I am trying to make a page with three column layout using inline-block display property, and a width of 33.333% for each column to fit the whole width. the problem I could not have the required layout using width=33.3333% it shows only two columns in the row. and when I change the width to 33% I get three columns layout but ofcourse not fitting the whole width. here's my code: <p data-height="268" data-theme-id="9486" data-slug-hash="wJGvq" data-default-tab="result" data-user="eiyadz" class='codepen'>See the Pen <a href='http://codepen.io/eiyadz/pen/wJGvq/'>wJGvq</a> by Eiyad Ziyadah (<a href='http://codepen.io/eiyadz'>@eiyadz</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//codepen.io/assets/embed/ei.js"></script>

Answer 1 · 2014-10-23T20:33:12Z

October 23, 2014 8:33pm

The reason you can't set it to a width of 33,3333% is because you have the spaces between each content block. If you were to add up the three blocks you'd get a width of 99,999% then add that spacing and that would exceed the width of 100%.

The space that you are seeing is not a margin problem, it is simply a normal space like the ones used between words.

So what you need to do is to remove the spacing. You can do this by adding float: left to your css. Like this:

.content {
    margin: 0.25em auto;
    vertical-align: top;
    border: 1px solid;
    display: inline-block;
    width: 33.3333%;
    float: left;
}

If you for some reason don't wish to float your sections you can also do this:

<div class="content">
    <h3>content 1</h3>
</div
    ><div class="content">
    <h3>content 2</h3>
</div>

OR

<div class="content">
    <h3>content 1</h3>
</div><!--
    --><div class="content">
    <h3>content 2</h3>
</div>

This is called minimized HTML and is completely valid code.... albeit it does feel weird, doesn't it?

Hope this helps.

Answer 2 · 2014-10-23T20:12:46Z

October 23, 2014 8:12pm

Try the float: left; in your css. This should fix the problem.

.content {
     margin: 0.25em auto;
     vertical-align: top;
     border: 1px solid;
     display: inline-block;
     width: 33.3333%;
     float: left;
}

Welcome to the Treehouse Community

Looking to learn something new?

Eiyad Ziyadah

Eiyad Ziyadah

Create three columns layout using inline-block.

2 Answers

Christian Andersson

Christian Andersson

Terrell Stagner

Terrell Stagner