Responsive Layout - Content Breaks

Question

I have a page layout with the following html structure:

<div class="row">
    <div class="col3">test 1</div>
    <div class="col3">test 2</div>
    <div class="col3">test 3</div>
</div>

Using the following css, I wanted to make a simple, responsive layout:

.row {
    width: 100%;
    display: block;
    padding-left: 1.25%;
    padding-right: 1.25%;
    margin: 0 auto 15px auto;
}
.col3 {
    width: 30%;
    display: inline-block;
    margin: 0 1.25%;
    border: none;
}

Why is it when I shrink my page to 30% of the width of my screen, the last column drops down underneath the other rows?

Is there something im not accounting for? I would have thought it would have just continued to get narrower and narrower. What causes it to create a content break, and drop down a row.

Screenshots:

Answer 1

It's from display: inline-block . If you float your columns to the left they will work as expected.

When you use display: inline-block spaces/returns etc between the elements that have inline-block applied to them will be taken into account and rendered. You can think of it as adding a single space between each inline-block element.

This is the main downside of using display: inline-block over floats in my humble opinion.

.col3 {
    float: left;
    width: 30%;
    margin: 0 1.25%;
    border: none;
}

You could also remedy this by doing the following if you wanted to continue using display: inline-block but they're hackerish. I would advise against either of these solutions.

no space between elements

<div class="col3">test 1</div><div class="col3">test 1</div><div class="col3">test 1</div>

comments between elements

<div class="col3">test 1</div><!--
--><div class="col3">test 1</div><!-- 
--><div class="col3">test 1</div>

Answer 2

Your problem lies with the lines

.col3 {
    ..
    width:30%;
    margin: 0 1.25%;
    ..
}

As width is 30% of the row, but while you are narrowing it down, the margin is actually getting wider with respect to the row, its a common thing which happens to inline-block display type.

If you drop the margin line, or simply change the width of the margin to

margin: 0 1%;

it would be fixed.

No need to worry about fixing inline-blocks, or having to deal with its downsides.