2 column elastic/fluid layout

I am trying to make a layout with an elastic sidebar and a fluid content area. however, I want the sidebar to appear to extend the whole height of the page. I know how to do this with a fixed-width layout, but with a fluid right column I am scratching my head.


<div id="page">

<!-- sidebar -->
<div id="sidebar">
	<div id="logo">
	Logo here
	<div id="navigation">
	Navigation here

<!-- header and content -->
<div id="rightCol">
	<div id="header">
	<div id="content">
	Main content here
</div> <!-- end page div -->

And my css:

#page {
	width: 95%;
	margin: 10px auto;

/* sidebar rules */
#sidebar {
	width: 15em;
	min-height: 100%;
	background: #eeeeee;
	float: left;

#logo {
	width: 200px;
	height: 200px;
	margin: 5px auto;
	text-align: center;
	border: 1px solid black;
/* end sidebar rules */
#rightCol {
	background: #d2d2d2;
	height: 700px;

Hi, to get a fluid right column just set a left margin on #rightCol of 15em. That will ensure the right column is fluid :slight_smile:

You could set up a min-height:100% routine. See FAQ at the top of this forum for details :slight_smile:

Thank you for the tip. I should have known. It is really the same method you use in a fixed layout.

If you have a left column, Set the right margin of the right column (or middle, depending on your layout) to the same width as your left column or vice versa.

If you want hte right column to take up the remaining width, and the left column is fixed/fluid/elastic (whatever!) then all you need to do is set a left margin on the right column.

The value of hte left margin has to match the width of the left column

Aka if my leftcolumn is 200px then I must set a margin-left:200px on the right column.
Aka if my left column is 20em then I must set a margin-left:20em on the right column