Printable View
How do I create a 2 column layout in CSS? I need to create a layout where in the left column the menu is displayed and all the info in the other column. I need the first column to be a fixed size and the 2nd column to expand with the window.
Your help is greatly appreciated.
Here's an example...
Added background colors so you can see how it stretches to fit the view port size...HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
#left_column {
width: 250px;
float: left;
background-color: #F5F5F5;
}
#content {
margin-left: 250px;
background-color: #EDF4FF;
}
#footer {
text-align: center;
border-top: 1px solid #ccc;
width: 90%;
margin: 10em auto 0 auto;
}
</style>
<title>2 Columns</title>
</head>
<body>
<div id="left_column">
<ul id="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div id="content">
<h1>Welcome!</h1>
<p>Welcome to my website blah blah blah blah blah blah blah very much tx!</p>
</div>
<div id="footer">
<p>Copyright © 2008 Very Much Tx...</p>
</div>
</body>
</html>
Instead of 10em margin-top on footer, you could just add padding-bottom: 10em; for content and left column. Depends what you prefer...ex:
css Code:
DigiRev,
This is exactly what I needed, as it turns out all I needed in my code was float:left.
Thanks for your help
You're welcome. :)Quote:
Originally Posted by mrstuff68