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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!