CODEWITHSUNDEEP
cssdom
Ka Ra
Ka Ra

Reputation: 429

How to set an element's height to be the same as its parent

I have a div called "content-left" within another "main-content". I want to have the child div assumes 100% of the parent's height. 

#main_content {
display: table;
width: 99%;
margin-left: auto;
margin-right: auto;
}

#content-left {
width: 250px;
float: left;
display: table-cell;
padding-bottom: 8px;
background-color: #F6F5F4;
height: 100%;
}
#content-rightside {
width: 782px;
float: left;
display: block;
padding-left: 10px;
}

Upvotes: 0

Views: 2152

Answers (2)

sellmeadog
sellmeadog

Reputation: 7517

For height: 100%; CSS rules to work, every parent of the element must have an explicit height defined. This type of stylesheet will work:

html,
body,
#main-content,
#left-column,
#right-column
{
    height: 100%;
}

#left-column
{
    background-color: #ccc;
    float: left;
    width: 75%;
}

#right-column
{
    background-color: #eee;
    float: left;
    width: 25%;
}

And here's a fiddle for you to look at: http://jsfiddle.net/txReR/

UPDATE

If you want the height to be based on content, use display: table like so:

#main-content
{
    display: table;
    width: 100%;
}

#left-column
{
    background-color: #ccc;
    display: table-cell;
    width: 75%;
}

#right-column
{
    background-color: #eee;
    display: table-cell;
    width: 25%;
}

And here's the updated fiddle: http://jsfiddle.net/txReR/1/

Do note that one draw back of this approach is that browser compatibility is more of an issue using CSS tables.

Upvotes: 1

Yaakov
Yaakov

Reputation: 184

This is a common problem, and here is a column which explain how you can achieve your goal

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Upvotes: 0

Related Questions