April 9, 2012
Surrounding DIV background-color and inline-block
Question by JohnDoe
If I set the background color for a div containing divs which have display:inline-block set, the background color is not used.
JSFiddle links below.
Consider this snippets:
CSS:
.divisionOutputArea {
background-color: yellow;
}
.divisionColumn[data-division=true][data-boxed=true] {
border: 1px solid black;
display: inline-block;
float: left;
}
.divisionColumn[data-division=true] {
display: inline-block;
float: left;
}
.divisionColumn[data-result=true] {
display: inline-block;
float: left;
}
And this HTML:
<div class="divisionOutputArea">
<div class="divisionColumn" data-division="true" data-boxed="true">
1<br /><br /><br /><br /><br />
</div>
<div class="divisionColumn" data-division="true" data-boxed="true">
2<br />2<br /><br /><br /><br />
</div>
<div class="divisionColumn" data-division="true" data-boxed="true">
3<br />3<br />3<br /><br /><br />
</div>
<div class="divisionColumn" data-division="true" data-boxed="true">
1<br /><br />1<br />1<br /><br />
</div>
<div class="divisionColumn" data-division="true" data-boxed="true">
2<br /><br /><br />2<br />2<br />
</div>
<div class="divisionColumn" data-result="true">
:<br /><br /><br /><br /><br />
</div>
<div class="divisionColumn" data-result="true">
5<br /><br /><br /><br /><br />
</div>
<div class="divisionColumn" data-result="true">
=<br /><br /><br /><br /><br />
</div>
<div class="divisionColumn" data-result="true">
2<br /><br /><br /><br /><br />
</div>
<div class="divisionColumn" data-result="true">
4<br /><br /><br /><br /><br />
</div>
<div class="divisionColumn" data-result="true">
6<br /><br /><br /><br /><br />
</div>
<div class="divisionColumn" data-result="true">
2<br /><br /><br /><br /><br />
</div>
</div>
I would like to render the background of the used area of <div class="divisionOutputArea">[Contained divs as of example]</div> e.g. yellow.
Tried it on FF11 and Webkit. Cross-browser is not of an issue.
Not working:
http://jsfiddle.net/8BVZB/
Somewhat working, but not what I want:
http://jsfiddle.net/d6bM6/
Answer by Starx
The inner divs are float, so you need the clear the float.
A very easy way is to give overflow: hidden to the wrapping element. Demo
.divisionOutputArea {
background-color: yellow;
overflow: hidden;
}
However, a safe way is to give
<div style="clear: both;"></div>
at the end of wrapping element
