Home/ Questions/Q 5843081
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T12:06:16+00:00

I am trying to make a simple two column layout but it seems harder

  • 0

I am trying to make a simple two column layout but it seems harder than I thought..

It needs to have:

  • A fixed width 300px left column
  • A right column which fills up the
    rest of the page – whatever the
    window size
  • Both column divs must touch the
    bottom of the page

The bit I had trouble with was the third bullet point, if I used floats then the right column would always wrap under the left column and I couldn’t get them both to be flush against the bottom of the page!

And I thought I needed to float the left column as setting the right to 100%-300px is impossible.

Any ideas? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this – tested from IE6+ on and works.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    html, body {height:100%;position:relative;margin:0;padding:0;}
.side {float:left;width:300px;height:100%;background:red;}
.main {margin-left:300px;background:blue;height:100%;}
    </style>
</head>
<body>
<div class="side">
       side content
</div>
<div class="main">
    content
</div>
</body>
</html>
    • 0