Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question div height same as container div

    This thing is really bugging me. Can someone help me out ?

    ok here's the problem.

    I have 2 divs placed next to eachother. I named it 'leftColumn' and 'rightColumn'. These 2 divs are inside a container div called 'wrapper'.

    Now, irrespective of what the contents of 2 div's are, they both should have the same height. How can I do that ?

    I don't want to set a static height. I tried to set the height to 100%. But dosen't help either.

    Please take a look at the simple html below. Left column has more data than the rigth column. So obviously the height of leftColumn is bigger than rightColumn. But I want the rightColumn also to be of same height as leftColumn.

    Thanks in advance.

    Mark

    <HTML>
    <HEAD>
    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>

    <STYLE TYPE="text/css">

    div.wrapper {
    margin-bottom:20px;
    position:relative;
    border:1px solid #GGGGGG;
    }

    div.leftColumn {
    display:inline;
    width:400px;
    border:1px solid #999CCC;
    padding-left:5px;
    padding-bottom:5px;
    }

    div.rightColumn {
    display:inline;
    margin-left:10px;
    width:300px;
    border:1px solid #999CCC;
    position:absolute;
    padding-left:5px;
    padding-bottom:5px;
    }

    </STYLE>

    </HEAD>
    <BODY>
    <form>
    <div class="wrapper">
    <div class="leftColumn">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div class="rightColumn">
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </div>
    </div>
    </form>
    </BODY>
    </HTML>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try something like this:
    Code:
    <html> 
    <head> 
    <title></title> 
    
    <style type="text/css"> 
    html, body, form {
    height:100%;
    }
    
    div.leftColumn, div.rightColumn {
    height:99.8%;
    border:1px solid #999ccc;
    }
    
    div.wrapper {
    height:100%;
    border:1px solid #gggggg;
    }	
    
    div.leftColumn {
    float:left;
    width:400px;
    } 
    
    div.rightColumn {
    float:right;
    } 
    </style> 
    </head> 
    <body> 
    <form> 
    <div class="wrapper"> 
    <div class="leftColumn"> 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
    </div> 
    <div class="rightColumn"> 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa 
    aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
    </div> 
    </div> 
    </form> 
    </body> 
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •