combining display:inline-block with clear:both not vertically stacking divs

Question

I have some HTML that looks like this:

<div class="TheContainer">

 <div class="TheData">this is some text inline-block with clear</div>
 <div class="TheData">this is some other text inline-block but not clearing</div>

</div>

The CSS looks like this:

.TheContainer{
 margin:20px 20px;
 background:red;}

.TheData{
 display:inline-block;   
 clear:both;
 background:yellow;
 padding:5px 5px;
 margin:10px 10px;}

I'm using inline-block so that the TheData divs wrap nicely around their content instead of extending the total width of TheContainer. I'm also using clear:both so that these TheData divs get stacked one above the other.

However, it seems that clear:both doesn't apply when elements are set to inline-block. The JSFiddle here demonstrates this.

How do I use inline-block AND make the divs stack vertically?

Thanks.

Answer 1

clear is only for clearing float

To get the effect you want, put float:left on .TheData. You will most probably also want an element below those div.TheDatas with clear but no float to make sure the container renders with the correct height.

Updated fiddle