Two Column, right column fixed width

HTML & CSS
1

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.



<!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

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.