CODEWITHSUNDEEP
htmlcss
ario
ario

Reputation: 1787

CSS: Floating divs have 0 height

I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:

HTML

<div id="outer">
    <div id="left">
         ...
    <div id="right">
</div>

CSS

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}

However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?

Upvotes: 53

Views: 27650

Answers (8)

Guffa
Guffa

Reputation: 700232

It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.

You can use the overflow style to make the parent element take the floating elements in consideration:

#outer { overflow: auto; }

Update:

As of 2020 there is a value for the display property that can be used (as @timgl07 pointed out in a comment), that has less unwanted side effects:

#outer { display: flow-root; }

Upvotes: 122

Aniket Jha
Aniket Jha

Reputation: 1781

if div inside a parent is floated it is no longer part of parent div:check it by inspecting parent element.no to fix your problem there are two methods: 1)make a empty div at end inside parent class it as .blank all following css

.blank:after{
        content: "";
        clear:both;
        display:block;
    }

Or 2) give parent a class .clear-fix and add css

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

it will give parent a height equal to contents

Upvotes: 0

jamesTheProgrammer
jamesTheProgrammer

Reputation: 1777

How bout like this:

<style type="text/css">
#outer{
   background-color:rgba(255,255,255,.5);
   width:800px;
   border:thin solid #000000;
   height:300px;
   margin:5px;
   padding:10px;
}

#left{
   float:left;
   border:thin dashed #000000;
   width:385px;
   height:100px;
   margin:5px;
}

#right{
   width:385px;
   float:left;
   border:thin dashed #000000;
   height:100px;
   margin:5px;
}
</style>

<div id="outer">
   <div id="left">
   </div>
        ...
   <div id="right">
</div>
</div>

Upvotes: 0

aziz punjani
aziz punjani

Reputation: 25776

You could clear the float by inserting an element after the floated elements that has a clear property applied to it because floated child elements cause the parent to have 0 height since they don't take the height of the floated children into consideration. 

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div class="clear"></div> 
</div>

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}
.clear{ clear: both; }

Upvotes: 2

Brian
Brian

Reputation: 2229

add overflow: hidden; to the main div. 

<style type="text/css">
#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
overflow: hidden;
border: 1px solid green;
}

#left{ 
    float:left;
border: 1px solid red;
}

#right{
    width:500px;
    float:right;
border: 1px solid yellow;
}
</style>

Upvotes: 2

Sven Bieder
Sven Bieder

Reputation: 5681

You must also float the outer div. Div's that contain floatet divs and that are not floated themselves collapse.

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
    float:left;
}

#left{
    float:left;
    width:300px;
}

#right{
    width:500px;
    float:right;
}

Upvotes: 2

kinakuta
kinakuta

Reputation: 9037

There are a couple of solutions to this issue:

#outer: overflow: hidden;

or add some non-displaying content to the outer div that comes after the floated divs that you then add a clear: both style rule to.

You can also add, through css, the :after pseudo-element to insert content after those divs that you then apply clear: both to - this has the advantage of not requiring extra markup.

My preference is the first one.

Upvotes: 5

Ayush
Ayush

Reputation: 42440

Try this:

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div style="clear:both"></div>
</div>

Upvotes: 2

Related Questions