Element's height in css

Question

I am having problem understanding the height of element in div. I have a header div which has certain divs inside it.The div inside occupy certain height. Isn't the header supposed to cover the area occupied by the elements defined inside it when the height is not mentioned. As per my understanding the header is supposed to wrap all the div inside it.

Please correct me if I am wrong.

This is my body

   <div style=" float:left; background-color:pink; width:20%; height:40px; ">
      THis is left
   </div>

   <div style=" float:left; background-color:gray; width:70%; height:40px; " >

        <div id="htop">
             This is top      
         </div>

       <div id="hbutt" >
          this is buttom
       </div>

  </div>

And here goes style

  #cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px;  }

  #header{ background-color:red; width:100%; padding:5px;  }

  #cont2{ background-color:blue; width:10%; height:auto; padding:5px; clear:both;  }

  #htop{ background-color:maroon; }

  #hbutt{  background-color:purple; }

For output and possible change need https://jsfiddle.net/sum1/vmq3y2rv/

http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increase — Vitorino fernandes, Feb 23 '15 at 06:14

score 1 · Accepted Answer · answered Feb 23 '15 at 06:15

1

When you have floating DIVs inside any other DIV, then height does not calculated automatically for outer DIV, to make it you should add display:inline-block or display:table to outer DIV depending on your layout.

 #header {
      background-color:red;
      width:100%;
      padding:5px;
    display:inline-block;
  }

Check this https://jsfiddle.net/vmq3y2rv/1/

answered Feb 23 '15 at 06:15

PRAH

670
7
19

to prevent affecting the properties of outer div, you can use `#outer_div:after{content: ''; display: table; clear: both;}` – Ejaz Feb 23 '15 at 06:18

score 1 · Answer 2 · answered Feb 23 '15 at 06:19

Yes this is true but when all elements are floated inside of the header it collapses.

.clearfix{
    clear:both;
 }

and then insert a div right before your header ends with a class of clearfix.

Jsfiddle is here https://jsfiddle.net/kriscoulson/vmq3y2rv/2/

score 1 · Answer 3 · answered Feb 23 '15 at 07:22

1

You can either use float:left or display:inline-block/table , It will be based on your requirements and layout.

answered Feb 23 '15 at 07:22

Anas Hashim

86
4

Element's height in css

3 Answers3