0

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;
}
Lior Elrom
  • 19,660
  • 16
  • 80
  • 92
Ka Ra
  • 419
  • 2
  • 6
  • 10
  • Your real question is how to make a floating element assume 100% height of its parent. see this question: http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent – Kai Qing Apr 18 '13 at 19:32

2 Answers2

1

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.

sellmeadog
  • 7,437
  • 1
  • 31
  • 45
  • what if I dont have a specific height? and it depends on the content of that div.. ? – Ka Ra Apr 18 '13 at 20:32
  • In that case, I believe you'd have to use the CSS `display: table;` constructs; I will try to update my fiddle ASAP to show this. – sellmeadog Apr 18 '13 at 20:48
0

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

Yaakov
  • 184
  • 1
  • 8
  • the issue I'm facing is that, a second child division is also within the parent divsion. I align child one and two to the left per your link but they become on top of each other as opposed to being next to each other. any suggestions? – Ka Ra Apr 18 '13 at 20:11