div background color not setting all area

Question

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,

<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>

My style is,

.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;
}
.how_next_last {
    width:32%;
    float:right;
}

Now the output is

What is the problem in my coding. Is there any solution.

Answer 1

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

Answer 2

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

Answer 3

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.

Why clear:both?

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

Answer 4

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>

Answer 5

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;
   }