Not able to set background color - html

Question

I am not able to set the background color for the #widgetContainer div. I was wondering if there is a way to align the div so that the empty space left out while floating an element can be minimized?
My Fiddle: jsfiddle.net/rLzb0caq

Answer 1

Your #widgetContainer has no height because all elements are floating. You should set the background color of #widgetContent instead, to get the desired result.
#widgetContent {
height: 50%;
width: 50%;
margin: 0 auto;
border: 3px groove solid red;
outline: 2px solid black;
background-color:yellow;
}
http://jsfiddle.net/inuya5ha/8ef7Lsvt/

Answer 2

Insert this tag before closing tag of #widgetContainer :
<span style="clear: both; display: block;"></span>
This will clear the floating of elements.

Answer 3

Change #widgetContent class to
#widgetContent {
background: none repeat scroll 0 0 #CCC;
height: 50%;
margin: 0 auto;
outline: 2px solid black;
width: 50%;
}

Answer 4

If you simply want background color to widgetContainer div, add overflow:hidden to #widgetContainer
#widgetContent {
height: 50%;
width: 50%;
margin: 0 auto;
border: 3px groove solid red;
outline: 2px solid black;
}
#widgetHead {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: gray;
}
#widgetContainer {
height: 100%;
width: 100%;
background: gray;
color: black;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
}
#widgetContainer > div {
float: left;
width: 31%;
min-height: 75px;
margin: 1%;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
border: 0.25% solid;
}
#widgetContainer > div div {
width: 80%;
min-height: 75px;
padding: 1%;
margin: 2% auto;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
border: 0.25% solid black;
}
.clean {
margin-bottom: 20px;
clear: both;
}
<div id="widgetContent">
<div id="widgetHead">
widgetData
</div>
<div id="widgetContainer">
<div id="node1" style="background-color: red;">
node1
<div id="vip1" style="background-color: red;">
vip1
<div id="obj1" style="background-color: gray;">
obj1
</div>
<div id="obj2" style="background-color: green;">
obj2
</div>
<div id="obj3" style="background-color: green;">
obj3
</div>
</div>
<div id="vip2" style="background-color: blue;">
vip2
</div>
</div>
<div id="node2">
node2
<div id="vip1" style="background-color: green;">
vip1
</div>
<div id="vip2" style="background-color: green;">
vip2
</div>
</div>
<div id="node3" style="background-color: red;">
node3
</div>
<div id="node4" style="background-color: red;">
node4
</div>
<div id="node5" style="background-color: red;">
node5
</div>
<div id="node6" style="background-color: red;">
node6
</div>
<div id="node7" style="background-color: red;">
node7
</div>
<div id="node8" style="background-color: red;">
node8
</div>
<div id="node1" style="background-color: red;">
node1
<div id="vip1" style="background-color: red;">
vip1
<div id="obj1" style="background-color: gray;">
obj1
</div>
<div id="obj2" style="background-color: green;">
obj2
</div>
<div id="obj3" style="background-color: green;">
obj3
</div>
</div>
<div id="vip2" style="background-color: blue;">
vip2
</div>
</div>
</div>
<div class="clean cf">
</div>
</div>