2 column elastic/fluid layout

HTML & CSS
1

Hi
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.

Thanks


<body>
<div id="page">

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

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

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;
}
2

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:

3

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.

4

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
etc
etc
:slight_smile: