SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question DIV Variable Height Columns, but matching height

    Hi Guys. Need a little help with variable height divs laid out as columns.

    The basic code I have is below, Im used to table layouts but slowly trying to get to grips with DIVs, with a table layout this would be simple.

    I have a container div, with two column divs inside. They are variable height depending on the content. The result im after is for both columns to be the same height depending on which one has more content, ie is the left column has more content than the right the right will match the left columns height and vice-versa.

    Is this even possible using divs & css? Just to clarify both columns should be the same height as each other (depending on which has more content), I dont want them to be bigger than required and as the content comes from a database I don't want to fix the heights.

    Thanks in advance
    James

    Code:
    <div class="columns">
    <div class="column left">VARIABLE HEIGHT CONTENT<br>row2</div>
    <div class="column right">VARIABLE HEIGHT CONTENT<br>row2<br>row3</div>
    <div style="clear:both;"></div>
    </div>
    Code:
    .columns{
    width:100%;
    height:100%;
    clear:both;
    border: 1px #000000 solid;
    clear: both;
    }
    .column.left{
    float:left;
    clear:none;
    width:49.5%;
    height:100%;
    border: 1px red solid;
    background-color: green;
    }
    .column.right{
    float:right;
    clear:none;
    width:49.5%;
    height:100%;
    border: 1px blue solid;
    background-color: yellow;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    There are various ways to do this. One is to have "faux columns", where you have a background image that fills the height of the container an gives the visual appearance of columns.

    Or you can just do this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>equal cols</title>
    	
    <style media="all">
    .columns {
      width:100%;
      display: table;
    }
    
    .column {
      display: table-cell;
      width:49.5%;
      border: 1px red solid;
    }
    
    .left {
      background-color: green;
    }
    
    .right{
      background-color: yellow;
    }
    </style>
    
    </head>
    <body>
    
    <div class="columns">
      <div class="column left">VARIABLE HEIGHT CONTENT<br>row2</div>
      <div class="column right">VARIABLE HEIGHT CONTENT<br>row2<br>row3</div>
    </div>
    
    </body>
    </html>
    You can find lots more ingenious ways to do equal height cols on Pau O'Brien's site, such as this:

    http://www.pmob.co.uk/pob/equal-columns.htm


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
  •