CSS 2 Column Layout

**mrstuff68** · Apr 7th, 2008, 07:54 PM

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.

**DigiRev** · Apr 7th, 2008, 11:15 PM

Here's an example...

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 &copy; 2008 Very Much Tx...</p>
    </div>
    
  </body>
</html>

Added background colors so you can see how it stretches to fit the view port size...

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:

#left_column {
        width: 250px;
        float: left;
        background-color: #F5F5F5;
        padding-bottom: 10em;
      }
      #content {
        margin-left: 250px;
        background-color: #EDF4FF;
        padding-bottom: 10em;
      }
      #footer {
        text-align: center;
        border-top: 1px solid #ccc;
        width: 90%;
        margin: 0 auto;
      }

**mrstuff68** · Apr 8th, 2008, 08:03 AM

DigiRev,

This is exactly what I needed, as it turns out all I needed in my code was float:left.

Thanks for your help

**DigiRev** · Apr 8th, 2008, 07:02 PM

Originally Posted by mrstuff68

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.

Thread: CSS 2 Column Layout

Thread Tools

Display

CSS 2 Column Layout

Re: CSS 2 Column Layout

Re: CSS 2 Column Layout [resolved]

Re: CSS 2 Column Layout [resolved]

Posting Permissions