How to Force Inline-Block Elements to Wrap

How to force inline-block elements to wrap?

If they are simply div elements set to inline-block they should wrap like so: http://jsfiddle.net/72cYy/

Check and be sure their container/parent element does not have a white-space:nowrap. That would cause them to not wrap.

Force wrapping an inline-block with CSS, after 'n' elements?

Instead of inline block use floats:

#results.grid .entry {
   float: left;
}

#results.grid .entry:nth-child(3n+1){
   background-color: yellow;
   clear: left;
}

$(document).ready(function() {  $('#mode').change(function() {    $('#results').removeClass();    $('#results').addClass($(this).val());  })})

#controls {  position: fixed;  z-index: 4;  background-color: white;  width: 100%;  padding: 4px}.entry {  width: 200px;  height: 150px;  border: solid 1px black;  margin: 5px;}#results.horizontal {  overflow-x: scroll;  overflow-y: hidden;  width: 100%;  white-space: nowrap;  padding-top: 40px;}#results.horizontal .entry {  display: inline-block;}#results.vertical {  position: absolute;  top: 40px;  bottom: 0;  overflow-y: scroll;  overflow-x: hidden;}#results.grid .entry.vertical {  display: block;}#results.grid {  padding-top: 40px;}#results.grid .entry {  float: left;}#results.grid .entry:nth-child(3n+1) {  clear: left;  background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="results" class="results grid">
  <div class="entry">Entry 1</div>  <div class="entry">Entry 2</div>  <div class="entry">Entry 3</div>
  <div class="entry">Entry 4</div>  <div class="entry">Entry 5</div>  <div class="entry">Entry 6</div>
  <div class="entry">Entry 7</div>  <div class="entry">Entry 8</div>  <div class="entry">Entry 9</div></div>

How to force text to wrap inside inline-block div?

You can do it this way

.wrapper {  display: table;  margin: 25px;}.wrapper .caption {  display: table-caption;  caption-side: bottom;  text-align: justify;  border: 1px solid grey;  background: darkgrey;  padding: .25em}

<div class="wrapper">  <img src="http://lorempixel.com/output/food-q-c-250-250-3.jpg" alt="Sample Image" />  <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, debitis!</div></div>

Inline-block parent wrapping contents with height explicitly set to 0

Your issue is about vertical-align rule for inline block elements. By default it baseline, here is some spec:

Baseline: Align the baseline of the box with the baseline of the parent box.

Force an inline-block to wrap withour a br

Here is one way you might try:

div{
    width:300px;
    border: 1px solid red;
    overflow: auto;
}

a{
    display: block;
    background-color: #dddddd;
    float: left;
    clear: both;
}

Float the a to the left and use clear: both.

Apply overflow: auto to the parent div to retain the floats within the block.

See demo at: http://jsfiddle.net/audetwebdesign/cKW4t/2/

I assumed that by wanting the elements to wrap, you mean each starts on a new line.

Understanding the wrapping behavior of inline-block elements with overflow:hidden

From my answer to this related question:

Generally, inline-level boxes do their best to avoid overflowing their containers as much as possible. [...]
The value of overflow on a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.

And from the spec:

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
A line cannot be broken, causing the line box to be wider than the block box.

This is why, in white-space: normal, line-break opportunities are presented by whitespace, and inline-level boxes will wrap at any opportunity they get. This includes inline-blocks. Inline-level boxes will only overflow their container if they cannot wrap, for any reason. Otherwise they will wrap.

Since an inline-block has the same rigid physical structure as a block container box, it's impossible for an inline-block to "break apart" or wrap when it's the only inline-level box on a given line box. This is why overflow occurs (even when the current line is not the first line) when the box cannot fit the bounds of its line box, for any reason, including when it's being offset by a horizontal margin.

Curiously, the behavior of no-break spaces with respect to inline-blocks is not consistent across browsers. No one knows why.

How to prevent inline-block divs from wrapping?

Add white-space: nowrap; to your .layout style declaration.

This will do exactly what you need: preventing the divs from wrapping.

Watch the

jsFiddle demo

or run the following snippet full screen and resize it:

.layout {       white-space : nowrap; /* this does the trick */          overflow : hidden; /* this prevents the grey divs from overflowing */    vertical-align : top;     border-radius : 15px;           display : inline-block;}
.layoutbacking {    border-radius : 15px;       background : #CCCCCC;          padding : 5px;           margin : 5px;}

<div class="layout" style="background: #222222; width: 100%">    <div>        <div class="layout layoutbacking">            <table>                <tr>                    <th>header 1</th>                    <th>header 2</th>                    <th>header 3</th>                    <th>header 4</th>                </tr>                <tr>                    <td>data 1</td>                    <td>data 2</td>                    <td>data 3</td>                    <td>data 4</td>                </tr>                <tr>                    <td>data 1</td>                    <td>data 2</td>                    <td>data 3</td>                    <td>data 4</td>                </tr>                <tr>                    <td>data 1</td>                    <td>data 2</td>                    <td>data 3</td>                    <td>data 4</td>                </tr>            </table>        </div>        <div class="layout">            <div class="layout layoutbacking">                <table>                    <tr>                        <th>header 1</th>                        <th>header 2</th>                        <th>header 3</th>                        <th>header 4</th>                    </tr>                    <tr>                        <td>data 1</td>                        <td>data 2</td>                        <td>data 3</td>                        <td>data 4</td>                    </tr>                </table>            </div>            <br />            <div class="layout layoutbacking">                <table>                    <tr>                        <th>header 1</th>                        <th>header 2</th>                        <th>header 3</th>                        <th>header 4</th>                    </tr>                    <tr>                        <td>data 1</td>                        <td>data 2</td>                        <td>data 3</td>                        <td>data 4</td>                    </tr>                </table>            </div>        </div>    </div>    <div>        <div class="layout layoutbacking">            <table>                <tr>                    <th>header 1</th>                    <th>header 2</th>                    <th>header 3</th>                    <th>header 4</th>                </tr>                <tr>                    <td>data 1</td>                    <td>data 2</td>                    <td>data 3</td>                    <td>data 4</td>                </tr>            </table>        </div>        <div class="layout layoutbacking">            <table>                <tr>                    <th>header 1</th>                    <th>header 2</th>                    <th>header 3</th>                    <th>header 4</th>                </tr>                <tr>                    <td>data 1</td>                    <td>data 2</td>                    <td>data 3</td>                    <td>data 4</td>                </tr>            </table>        </div>

How to Force Inline-Block Elements to Wrap