The height of div element is not setting automatically

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?

score 2 · Answer 1 · answered Jun 01 '12 at 11:09

2

add float:left; in your block class.

answered Jun 01 '12 at 11:09

CSS Guy

1,978
3
18
27

score 1 · Answer 2 · answered Jun 01 '12 at 11:04

1

because float takes them out of the current flow. They are not inside the block div in the same way they where, use positioning and display:inline to get them to line up the way you want

answered Jun 01 '12 at 11:04

Simon McLoughlin

8,293
5
32
56

score 1 · Answer 3 · edited May 23 '17 at 11:49

1

You can use absolute positioning where by the outer element is set to height:auto and the inner #pe and #area are set to height:100%.

Have a look at this answer: How to make a floated div 100% height of its parent?

edited May 23 '17 at 11:49

Community

1
1

answered Jun 01 '12 at 11:04

monokh

1,970
3
22
31

score 1 · Answer 4 · answered Jun 01 '12 at 11:05

1

That's because they're not part of the common flow of the document anymore.

The solution could be to set display: block in the block class and then use position: absolute to position the element within that block by using left: 0 and right: 0

answered Jun 01 '12 at 11:05

Jon G Stødle

3,844
1
16
22

score 1 · Answer 5 · answered Jun 01 '12 at 11:07

1

Just add overflow:hidden to class "block".

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

Here is the fiddle: http://jsfiddle.net/rWuBF/

answered Jun 01 '12 at 11:07

SVS

4,245
1
23
28

score 1 · Answer 6 · answered Jun 01 '12 at 11:07

1

I would add overflow:hidden to the containing element (#header). That should fix it.

answered Jun 01 '12 at 11:07

Anriëtte Myburgh

13,347
11
51
72

score 1 · Accepted Answer · answered Jun 01 '12 at 12:01

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

score 0 · Answer 8 · answered Jun 01 '12 at 11:15

Although a bit dirtier, you can also add something that clears both after the floated elements.

<div id="header" class="block">
  <div id="pe" class="text"> ... </div>

  <div id="area" class="text"> ... </div>

  <div style="clear:both;"></div>
</div>

There are also cleaner "clearfix" variations of this as well, that will let you clear:both without adding non-semantic markup. http://www.positioniseverything.net/easyclearing.html

The height of div element is not setting automatically

8 Answers8