SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Child #1 (left) won't stretch

    How can I get the left div to stretch to the height of the right div, even though it has less content?

    Thanks

    HTML Code:
    <style>
    .left{width:50px;float:left;background:#0099ff;position:absolute;}
    .right{position:absolute;width:50px;float:right;background:#007774;height:auto;position:relative;display:block;}
    .container{width:100px;background:#000000;overflow:hidden;display:inline-block;}
    </style>
    
    <div class="container">
    <div class="left">
    testing<br />
    testing<br />
    </div>
    
    
    <div class="right">
    testing<br />
    testing<br />
    testing<br />
    testing<br />
    </div>
    
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could do it like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>equal height</title>
    	
    <style media="all">
    .container{width:100px;background:#000;display:table;}
    .left, .right {display: table-cell; width: 50px;}
    .left{background:#0099ff;}
    .right{background:#007774;}
    </style>
    	
    </head>
    
    <body>
    
    <div class="container">
      <div class="left">
      testing<br />
      testing<br />
      </div>
    
      <div class="right">
      testing<br />
      testing<br />
      testing<br />
      testing<br />
      </div>
    </div>
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not gonna lie, I have been doing this for a long time now and have not seen that before. Works like a charm, thanks Ralph.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No worries. Be aware that it won't work on IE7 and under, though I consider them quite dead now anyway.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

Bookmarks

Posting Permissions

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