CSS class not inheriting

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: alt text

Ryan Kinal · Accepted Answer · 2010-10-27 15:52:07Z

6

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.

answered Oct 27, 2010 at 15:52

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Justus Romijn Over a year ago

Peter Paul Koch (aka PPK) has a nice article about clear floats with overflow: PPK: CSS clearing floats

Robert Koritnik Over a year ago

I suggest using overflow:auto rather than hidden. It's the usual way of giving parent the size of their child elements consumed space.(still +1 from me)

Ryan Kinal Over a year ago

I generally use hidden to avoid accidental scrollbars.

Collectives™ on Stack Overflow

CSS class not inheriting

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related