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.