CODEWITHSUNDEEP
htmlcss
Dennis van hove
Dennis van hove

Reputation: 1

float element doesn't affect height

I know there are already many posts on this topic, but I just can't manage to get this to work, so sorry for that..

So i have 2 div elements next to eachother, the left one is a normal static one and the right one is a float, but it doesn't affect the height of it's parent. How can I fix this annoying problem?

<div id="content">
<div id="sidebar">
</div>
<div id="articles">
</div>
</div>

#content {
    background-color: #efefef;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    margin: auto;
    width: 1200px;
    margin-top: 55px;
    padding: 20px 0 20px 0;
}

#articles {
    width: auto;
    border-right: 1px solid grey;
    overflow: hidden;
    padding: 25px;
    font-family: reef;
}

#sidebar {
    margin-right: 10px;
    overflow: hidden;
    width: 300px;
    float: right;
}

Upvotes: 0

Views: 579

Answers (3)

xdhmoore
xdhmoore

Reputation: 9876

try setting overflow:hidden for #content.

This post has some more info on why this can solve the float-container-height problem: Overflow:hidden in float. Does it hide anything?

Upvotes: 0

Bevanz
Bevanz

Reputation: 39

Try setting the css to position relative...

#sidebar {
margin-right: 10px;
overflow: hidden;
width: 300px;
float: right;
position: relative;

}

http://codepen.io/bevanz/pen/VLrbxJ <- might be an issue with not having content in the div aswell. Mycode pen shows what i mean!

Upvotes: 0

Sotiris
Sotiris

Reputation: 40046

Clearfix the container

#content:before,
#content:after {
    content: " ";
    display: table;
}

#clearfix:after {
    clear: both;
}

The above snippet is from html5boilerplate. The authors state for the above solution:

  1. The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the clearfix class.
  2. The use of table rather than block is only necessary if using :before to contain the top-margins of child elements.

Upvotes: 1

Related Questions