CODEWITHSUNDEEP
htmlcssnested
StudioTime
StudioTime

Reputation: 24019

<div>s won't nest

I am trying to make the outer class - rightholder_empty, expand vertically with the content of the inner classes but have run out of ideas...If you can help, could you please explain too as I need to understand this.

The HTML & CSS:

<html>
<head>
<title>Css test</title>
<style>
  .rightholder_empty {
    padding:15px;
    margin:0 auto;
    border: solid 6px #e8e8e8;
    background: #f5f5f5;
    -webkit-box-shadow: 0 8px 6px -6px #666;
    -moz-box-shadow: 0 8px 6px -6px #666;
    box-shadow: 0 8px 6px -6px #666;
    border-radius:4px;
    position:relative;
    width:700px;
}

.split_l {
    padding:15px;
    margin-bottom:10px;
    background: #f5f5f5;
    float:left;
    width:45%;
    position:relative;
}

.split_r {
    padding:0 15px 15px 15px;
    margin-bottom:10px;
    background: #f5f5f5;
    float:right;
    width:45%;
    border-left: solid 4px #ededed;
    position:relative;
}

</style>
</head>

<body>

<div class="rightholder_empty">
    <div class="split_l">hello<br /><br />h<br /><br />h<br /><br />h</div>
    <div class="split_r">world</div>
</div>

</body>
</html>

Upvotes: 1

Views: 203

Answers (3)

Alexander Corwin
Alexander Corwin

Reputation: 1167

I had this problem yesterday and almost lost my mind! try adding

overflow: auto;

to the rightholder_empty CSS. That worked for me.

Upvotes: 3

Zorg
Zorg

Reputation: 96

"The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow."

Citation from http://www.webtoolkit.info/css-clearfix.html See solutions here.

Upvotes: 0

sandeep
sandeep

Reputation: 92863

You have to clear you parentDIV because the child DIV's have float in it so write like this:

.rightholder_empty {
    overflow:hidden;
}

Upvotes: 1

Related Questions