I have a div containing 3 div inside it. My problem is when am setting background color to first div, the div inside first div is not applying the background.
My code is
What about create a new class style:
.clearfix{
clear:both;
}
Then add it to the end of your HTML:
<div class="how_next">
<div class="how_next_single" align="center">
<p><img src="images/livemonitoring.png" /></p>
<p>Heading</p>
<h3>Description</h3>
</div>
<div class="how_next_single" align="center">
<p><img src="images/livemonitoring.png" /></p>
<p>Heading</p>
<h3>Description</h3>
</div>
<div class="how_next_last" align="center">
<p><img src="images/livemonitoring.png" /></p>
<p>Heading</p>
<h3>Description</h3>
</div>
<div class="clearfix"></div>
</div>
And don't use such a things like align="center" it's not a proper way of centering things due to HTML5 standards. All those things should be achieved by CSS, you shouln't write any styles in your HTML tags, that's a good practice.
Hmmm, I also think that you don't need height:auto in your how_next style.
You must do this in your case, because you're using floating elements, which won't make your parent expand by them.
Have a look! http://www.w3schools.com/cssref/pr_class_clear.asp
Try to add:
<div class="clear"></div>
and give him style:
<style>
.clear{both;with:100%;}
</style>
after the .how_next_last div
Example:
<div class="how_next">
<div class="how_next_single" align="center">
<p><img src="images/livemonitoring.png" /></p>
<p>Heading</p>
<h3>Description</h3>
</div>
<div class="how_next_single" align="center">
<p><img src="images/livemonitoring.png" /></p>
<p>Heading</p>
<h3>Description</h3>
</div>
<div class="how_next_last" align="center">
<p><img src="images/livemonitoring.png" /></p>
<p>Heading</p>
<h3>Description</h3>
</div>
<div class="clear"></div>
</div>
See this is the perfect answer of your query.
Css:
.how_next {
height:auto;
background-color:#E9E9E9;
padding:15px;
font-size:16px;
font-weight:bold;
margin-top:10px;
}
.how_next_single {
width:32%;
float:left
}
Working Link
When you use floating elements inside a wrapper you need to clear them. There are various ways to clear them using clearfix technique, using overflow:hidden, etc.
So, you need to do just:
.how_next {
overflow: hidden;
}
You may have an interest in these q/a:
what is clearfix
which method of clearfix is best
clearfix with twitter bootstrap
all about floats
This is your perfect answer for css.
.how_next {
height:auto;
background-color:#E9E9E9;
padding:15px;
font-size :16px;
font-weight:bold;
margin-top:10px;
float:left;
width:100%;
}
.how_next_single {
width:32%;
float:left;
}
.how_next_last {
width:32%;
float:right;
}