Question

               .block    
               {
                width:540px;
                margin:20px;
                padding:10px;
                border:1px solid Gray;
               }

              <div id="header" class="block">
                <div id="pe" class="text">
                  <b>Name :</b> <span>King</span><br />
                  <b>Surname :</b> <span>Kong</span>
                </div>
                <div id="area" class="text">
                  <span id="city">Abcs</span><b>/</b>
                  <span id="state">Bcsdf</span>
                </div>
              </div>​

If u run the above code in Jsfiddle, then it shows a border around the text and the important thing is that the height of the block class is auto, so it automatically adjust its height.

But the problem comes when i added the following css :

 #pe
 {
  float:left;
 }
 #area
 {
   float:right;
 }​

Now the height of div.block is not set automatically. Can anybody tell me the problem?

Answer 1

Now You need a Clearfix for it

.clearfix:after{
clear:both;
line-height:0;
height:0;
display:block;
background-color:transparent;
border:none;
content: ".";
visibility:hidden;
 }

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
 }

you add it like this

"<div id = "header" class="block clearfix"></div>"