DIV container height

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • anish007
    New Member
    • Aug 2008
    • 1

    DIV container height

    I have a problem with making div container height grow with respect to the other.

    I have basically 3 div containers, the div container named main contains the other 2 containers left and right respectively. My left container floats left and my right container floats right. The right containers height changes in different pages according to content, and my left container always has the same content.
    Now, how would i make my left container height grow so that it matches up with the right container, in different pages?.

    Can anyone help me with this, i would really appreciate it.
    Code:
    <div id="main">
           <div id="left">
           </div>
           <div id="right">
           </div>
    </div>
    my attributes of div containers are:
    Code:
    #main{
            width: 746px;
            background: #FFFFFF;
            margin: 0 auto;
            border: 1px solid #000000;
            text-align: left; }
    
    #left {
    	width: 148px;
    	float: left;
    	height: 100%;
    	background-color: #5A6577; }
    # right{
    	zoom: 1;
    	width: 595px;
    	float: right;
    }
    Last edited by eWish; Aug 22 '08, 11:44 PM. Reason: Please use code tags
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    a question, why do you need the right container? It seems that the right div contains the content, the left maybe navigation and the main container left and right div, but nothing else. Personally I'd drop the right container making the main container for the content. If you want the background color of the left container all trough to the bottom, why not using the border property of main?
    [CODE=css]#main{
    width: 595px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    border-left: 148px solid #5a6577
    text-align: left; }

    #left {
    width: 148px;
    margin-left: -148px; }
    /* another possibility to draw the div onto the border:
    position: absolute;
    left: -148px; */[/CODE]

    Comment

    Working...