Question

Sorry for a very simple question, but I’m just beginning with HTML & CSS and I want to create a <div> and two <div>s inside of it (one floating on the left side and one on the right). I want them both to have equal height (inherit it from the parent, so height: 100%), but something does not work like expected.

Here’s some text below the red div (especially in smaller resolutions):
http://jsfiddle.net/KqbtG/

This solution is almost perfect and looks exactly like expected but the red div is above the blue one (Lorem ipsum do etc. is inivsible):

http://jsfiddle.net/4EnF9/1/

Any ideas? I can’t have fixed height, because I’ll have pleny of these divs and different content in them.

Answer 1

#container {
    display: inline-block;
    background-color: #eee;
    width: 90%;
    height: 300px;
}

#menu {
    float: left;
    background-color: red;
    width: 100px;
    height: 100%;  
}

#content {
    background-color: blue;
    height: 100%; 
}

You have to do two things:

1. Set the height of the container div so it can be inherited
2. make sure content has height :100%