CODEWITHSUNDEEP
htmlcss
GregM
GregM

Reputation: 3734

div height not set based on inner divs

I have a div as a container which contains two columns both columns have dynamic sizes, and I need the top container to take on the inner divs sizes, so that my content below the container lines up correctly

#container{
    width:800px;
    height: auto;
    min-height: 100%;
    margin:0 auto;
}
#leftdetails{
    float:left;
    width:250px;
    height: 100%;
}
#rightdetails{
    float:right;
    width:250px;
    height: 100%;
}

When I inspect the container the height is 0

     <div id="reamcontent">
            <div id="rightdetails">
                lots of content
            </div>
            <div id="leftdetails">
                lots of content
            </div>
     </div>
<div id"other">
 this overlaps the reamcontent
</div>

Upvotes: 0

Views: 224

Answers (2)

Moob
Moob

Reputation: 16214

Sounds like you need a clearfix:

#reamcontent:after {
  content: "";
  display: table;
  clear: both;
}

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

add a clear div this will fix the height

The outer div is collapsing because the two child divs inside of it are floating

css

.clear {
    clear:both;
}

html

<div id="reamcontent">
    <div id="rightdetails">lots of content</div>
    <div id="leftdetails">lots of content</div>
    <div class="clear"></div> <!-- div added -->
</div>

Upvotes: 1

Related Questions