CSS Trick: 2 Columns, 1 with a Dynamic Width and 1 with a Fixed Width

Date Published: 10/03/2009 11:27

Its considered good practice to design your web pages to be as flexible as possible meaning the page can move and stretch to best meet the requirements of your user. This said not many sites actually offer horizontal flexibility in their designs so if a user has a particularly thin or wide screen resolution they are punished by scrollbars or a narrow column of content respectively. To combat this it is possible to use percentages to control the width of your content areas of course, but this isn't always ideal. Some areas of your content are a set width for a reason. Maybe your menu has a background image which you don't want to repeat and look ugly or you have an image or flash video in that column which you do not wish to distort or cover up. Heres a quick work around which allows you to have one column with a set width while the other has a dynamic width.

The HTML Source Code

For the sake of this example I will just be using two simple divs, one will contain some link elements which I want to display down the right hand side of the screen and the other will contain my page content. It is possible to wrap this example into a container div so that it does not take up the entire page. You could also add further columns and simply allocate the horizontal space accordingly.

<html>
<head>
<title>Example Page</title>
</head>
<body>

<div id="content">
   <p>Here is some content text</p>
   <p>Here is some more content text</p>
</div>
<div id="links">
   <a href="#">Link One</a>
   <a href="#">Link Two</a>
   <a href="#">Link Three</a>
</div>

</body>
</html>

The CSS Rules

If I want to display the links DIV at the right edge of the page with a set width of 200px I simply apply the following style rules to it.

div#links {
   position: absolute;
   width: 200px;
   top: 0px;
   right: 0px;
}

I can adjust the top and left attributes to position it exactly where I want it. This will now sit where I want it on the page but if the content in the content DIV is too wide it will pass underneath this element so to combat this will simply add a right margin to the content div which is the same width as the links DIV.

div#content {
   margin-right: 200px;
}

Now as the window width is reduced the width of the content DIV also decreases with any content wrapping round once it reaches the margin meaning no content will be hidden by the links DIV. This technique is highly scalable and can be modified to best suit your needs depending on how many columns you require and what order they must appear.

Another advantage I have found with this technique is that you can put non-content elements such as links and images further down the source. This is a benefit when writing pages which you want to perform well on search engines and on non-standard browsers such as PDAs and mobile phones. Normally if you had a div containing a menu bar which you intended to appear on the left of the page (like this site) you would put that div into the source first. Doing this means that anyone looking at the page without your style sheet will see that first which isn't always ideal. By absolutely positioning these elements you can insert them lower down the source but have the appear further up. A similar effect can be achieved using negative margins.

Comments

Sorry comments are currently disabled for maintenence

5 Most Recent Articles

Manually Triggering Events in ASP.NET from JavaScript

A quick guide for ASP.NET developers on how to manually trigger ASP.NET events from JavaScript.

Advanced Use of MySQL Stored Procedures

An article for users of MySQL databases describing how they can use advanced stored procedures to improve efficiently in their applications.

Using MySQL Stored Procedures and Extending MySQLi in PHP

A guide for LAMP developers to using stored procedures in MySQL and extending the MySQLi class.

Reading and Writing to Excel Spreadsheets in Python

An introduction to using the xlwt and xlrd modules for python to interact with Microsoft Excel spreadsheets.

Interact with the Web Using Python and the HTTP Library

This is an introduction to making HTTP requests from a python script/application using httplib.

Sponsors