Home/ Questions/Q 9000063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:15:47+00:00

I have the following layout: ( jsfiddle ) <!DOCTYPE HTML> <html> <body> <div class=main_container>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set position:relative on the main_container.

    Since the left column has height:100% it will be the same height as its parent. Under the former code, this element’s parent was the document since it had position:absolute. Adding position:relative to the container causes it to become the parent of the left column, causing the height of the column to adjust to its parents height.

       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;
        position: relative;
    }

    http://jsfiddle.net/ETYzR/3/

    • 0