Question

I have a blog of code written such as this:

<div class="box">
   <div class="statusbox">
      <div class="cleft">some stuff</div>
      <div class="cright">some more stuff</div>
   </div>
</div>

and this is the CSS code for it:

.box{padding:10px; border: 1px black solid;width: inherit;}
.statusbox{border-bottom: 2px #736f6e solid;}
.cleft{float:left;width:84%;vertical-align:middle;min-height:50px;margin-right:10px;padding-top: 5px;}
.cright{float:right;width:15%;text-align:right;vertical-align:middle;min-height:50px;padding-top: 5px;}

The issue I’m having is that the structure is not obeyed in terms of the CSS layout. Whilst cleft and cright show correctly, they are not being embedded within statusbox and box. box and statusbox just clump up together, just above the “some stuff”.

Here’s an image of what I’m currently getting:

Answer 1

Add overflow: hidden to statusBox

Floated elements do not contribute to the height of the parent. Since both of your elements are floated, then the parent has no height. Adding overflow: hidden changes that.