View Full Version : 2 variable columns in 3-column layout

Aug 19th, 2009, 07:28 PM
Evening all, I hope someone can help me out here...

I have created a 3-column layout with a fixed-width menu on the left. I want the right column to display navigation that varies depending on which section of my site the visitor is in. Some of the links vary dramatically in length, and I don't want to have a great big empty space in the sections where the links are all short, so I need the right column to be able to vary in size.

I then want the centre column, which contains the majority of the content to fill the remaining space in between the fixed-width left and the variable-width right columns.

The left column is positioned using float: left, and the right column using float: right. At present the right column expands correctly but I'm not sure what to do with the central column.

Thanks for any help.

Aug 19th, 2009, 08:41 PM

You are correct with the floats, what is wrong with your central column, just don't give it a width and it'll fit nicely between the two floated columns.

Here check out this example:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
* { margin:0; padding:0; }
body { margin:0; font-family:Verdana, Geneva, sans-serif; }
#left { background:red; width:200px; padding:5px; float:left; overflow:auto;}
#right { background:black; padding:5px; color:white; float:right; overflow:auto; max-width: 300px; }
#center { background: grey; padding:5px; overflow:auto; }
#center p, #right p { margin:0; padding:15px; }
#right ul { margin:0; padding:0; list-style:none; }
#right ul li { margin:0; padding:0; }
#right ul li a{ text-decoration: none; color:#fff; font-size:16px; }
#right ul li a:hover { color:#FF0; text-decoration:underline; font-size:20px; }

<div id="left">
<div id="right">
<li><a href="#">Link One</a></li>
<li><a href="#">Longer Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four Four Four Four Four Four Four Four Four</a></li>
<p>Nulla pulvinar, turpis ut consequat malesuada, nisi ligula viverra sem, vel imperdiet odio nunc at tortor. Sed molestie accumsan pretium. Donec vitae metus velit, vitae laoreet tellus. Suspendisse potenti. Nam eu mi in odio sollicitudin sagittis. Phasellus tempus suscipit urna, in gravida nibh vehicula eu. Suspendisse sed elit diam, at tempus libero. Sed egestas sapien quis quam commodo pretium. Aliquam laoreet elit sit amet elit ornare luctus. Praesent auctor, velit vel faucibus fringilla, magna mauris consequat lacus, eget dignissim ligula nulla ac tortor. Mauris convallis semper magna eu cursus. Suspendisse potenti. </p>
<div id="center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum feugiat metus. Donec facilisis mauris quis tortor fringilla ac suscipit purus malesuada. Quisque sed sapien sit amet nunc egestas pretium vitae interdum felis. Praesent sed neque at massa aliquet eleifend hendrerit quis ligula. Sed imperdiet euismod imperdiet. Phasellus quis quam nunc, ut semper ipsum. Nunc convallis rutrum odio. Integer nec diam quis dui ullamcorper tempor. In lacus sapien, ullamcorper ut ornare eu, feugiat at sem. Aenean sit amet nunc in mi eleifend semper. Duis id lacus sapien. Duis volutpat sollicitudin tempus. Duis nunc nisl, faucibus vitae malesuada nec, fringilla in velit. Praesent rhoncus, sapien sit amet suscipit condimentum, dui massa hendrerit odio, vitae pellentesque mi ligula ut metus. In egestas turpis at nisi mattis viverra. Nam interdum dapibus nisl, ut imperdiet sem dictum at.</p>

<p>In hac habitasse platea dictumst. Pellentesque et nisl arcu, quis commodo nisl. Aliquam erat volutpat. Pellentesque eros leo, bibendum ut facilisis nec, dictum in nisl. Aliquam fermentum pulvinar diam, ac vehicula risus lacinia ac. Etiam hendrerit egestas scelerisque. Donec dui est, fermentum sit amet posuere vel, cursus quis lectus. Integer consectetur, arcu in porta facilisis, felis arcu dapibus erat, a blandit dui augue eu felis. Sed pellentesque, ligula id ultricies tempor, nunc mi blandit diam, quis viverra massa nunc ut erat. Etiam est risus, lacinia nec convallis sit amet, elementum et elit. Proin imperdiet dignissim sapien, non dictum lectus semper at. Quisque blandit, neque sed tincidunt luctus, est ante pulvinar mauris, ut vehicula nulla eros mattis nulla. Nullam felis dui, sagittis eget porta ac, congue nec turpis. Etiam a nibh ipsum. Ut sed urna vitae eros semper semper. Nullam quis tellus enim. Donec molestie placerat quam, vitae vulputate dui congue vitae. </p>

It works in the latest IE and FF.