SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Column, right column fixed width

    Hi all

    I thought this would be easy but I'm stuck.

    http://www.ttmt.org.uk/col/

    I have a page that is 100% width.

    I have a header and a sticky footer. In between I have 2 columns that I need to be 100% height.

    I need the right column to be 300px wide and the left column to the rest of the available space.

    I'm stuck making the columns sit next to each other and 100% height.


    Code:
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      
      <!--jQuery-->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      
      
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        html,body{
          height:100%;
        }    
        #wrap{
          min-height:100%;
        }
        #content{
          padding-bottom:50px;
        }
        header{
          height:100px;
          background:green;
        }
        
        .col{
          height:100px;
        }
        #left-col{
          background:#ccc;
          margin-right:300px;
        }
        #right-col{
          background:#888;
          width:300px;
          float:right;
        }
        footer{
          position:relative;
          margin-top:-50px;
          height:50px;
          background:red;
        }
        
      </style>
      
        
      <title>Title of the document</title>
      </head>
      
    <body>
      
      <div id="wrap">
        <header>
          <h2>Header</h2>
        </header>
        
        <div id="content">
          <div id="left-col" class="col"><h2>Col 1</h2></div>
          <div id="right-col" class="col"><h2>Col 2</h2></div>
        </div>    
        
      </div>  
      <footer>
        <h2>Footer</h2>
      </footer>  
    </body>
    
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Make sure to check out the sticky footer FAQ, which points out important things you need to do with a sticky footer. You need to have the footer inside the wrap div.

    If you want to float the right column like that, it needs to come before the left column in the source order. There are many other ways to do columns, though.


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
  •