'div element not filling to the height of its container div

I have the following layout: (jsfiddle)

<!DOCTYPE HTML>
<html>
<body>

<div class="main_container">

    <div class="left_container">
    </div>

    <div class="right_container">
    </div>

</div>

</body>
</html>​

CSS:

div.main_container {
    background: #000; 
    border: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    width: 100%;
    min-height: 400px;
    margin: auto;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    background: red;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

div.right_container {
    position: relative;
    margin-left: 220px;
    width: 715px;
    height: 100px;
    background: blue;
}

I can't seem to get the left (red) container to fill the height of the main container, where the content of the right container has the possibility to increase the height of the main container (a non-jQuery solution).

Would appreciate some guidance.

htmlcss


Solution 1:[1]

margin: 0px;
padding: 0px;

not none, use 0px

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions