Cant get two column layout to work

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!

Answers


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>

CSS:

#main, * html #left, * html #right { display:inline; height:100% }
#main { display:table }
#left, #right { display:table-cell }
#left { width:300px }

The * html #left is for IE, so that it is forced to use display:inline; height:100%. IE doesn't seem to support display:table-cell.

HTML:

<div id="main">
    <div id="left"></div>
    <div id="right"></div>
</div>

Need Your Help

Method Chaining equivalent?

c# linq linq-to-sql lambda

This is working properly (from initial testing). Since method chaining is my preferred format, I've tried to figure out what the method chaining equivalent is, but with no luck. Any ideas? var d...

Matlab simulate quadcopter

matlab simulink

I want to simulate a quadcopter flight (x,y,z,roll,pitch,yaw).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.