2 Columns with left column fixed!

**matt-** · Apr 15, 2006 07:24

Hi all,

I've been trying for weeks on and off to get a 2 column layout with left column fixed and right column fluid.

Without using too many nests, or js tricks.

Is it even possible to do cleanly? Any ideas?

Many Thanks,
Matt.

**Egor** · Apr 15, 2006 07:51

Hi,

Here's a simple skeleton:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>2-Column Fluid</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      
      body {
        font: 11px/1.6 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
      }
      
      #page {
        width: 90%;
        overflow: hidden; /* To contain float */
        margin: 50px auto;
        padding: 10px;
        border: 1px solid #CCC;
      }
      
      #content-main {
        margin-left: 200px;
      }
      
      #content-sub {
        float: left;
        width: 200px;
      }
    </style>
  </head>

  <body>
    <div id="page">
    
      <div id="content-sub">
        <h2>Without using too many nests, or js tricks.</h2>
        <p>I've been trying for weeks on and off to get a 2 column layout with left column fixed and right column fluid.</p>
      </div>
    
      <div id="content-main">
        <h1>Without using too many nests, or js tricks.</h1>
        <p>I've been trying for weeks on and off to get a 2 column layout with left column fixed and right column fluid.</p>
      </div>
    
    </div>
  </body>
</html>

**matt-** · Apr 15, 2006 07:54

Thanks Egor,

I forgot to mention that I had used that method previously, but found that I had problems with floats because the content-main wasn't floated, something to do with the parent element having to be a float otherwise all hell breaks loose?

**matt-** · Apr 15, 2006 08:02

Just tested and floats in the content-main seem to work fine from what I can tell, perhaps it was something else I missed when I tried it. Thanks again Egor.

**Egor** · Apr 15, 2006 08:04

Edit:

Cool.

Originally Posted by matt-

Thanks Egor,

I forgot to mention that I had used that method previously, but found that I had problems with floats because the content-main wasn't floated, something to do with the parent element having to be a float otherwise all hell breaks loose?

Hi Matt,

It's worked fine for me in the past. What sort of problems were you having?

**matt-** · Apr 15, 2006 09:12

Actually, just came across it again.

If I have a couple floats in the content-main, then use a clear class to clear them, It effects the content-sub and content-main..

e.g.

<div style="float:left;">hello</div>
<div style="float:right;">world</div>
<div style="clear:both;"></div>

<h3>Next Content</h3>
<p>This is some next content that in my markup doesn't show after the clear</p>

Any ideas?

Update: It does show on your source, but drops below the left columns float

**Egor** · Apr 15, 2006 11:26

Matt, is this just happening in Internet Explorer by any chance? It could well be a haslayout bug, fixed with:

Code:

* html #content-main {
  height: 1%;
}

Let me know if that solves the problem.

**matt-** · Apr 15, 2006 11:54

Sadly not, it happens in FF and IE with the above fix, haven't tried in others..

**Egor** · Apr 15, 2006 13:10

Hi,

That sucks. Not sure what could be up with it (nor have the time to look this morning

). Have you given Paul's example a go: http://www.pmob.co.uk/temp/2col-onefluid-onefixed.htm

**matt-** · Apr 15, 2006 14:17

Ah, the only difference in pauls example concerning the two columns is to put a wrapper inside the right column, set it to 100% and float it, so any clear's within that float work properly, instead of clearing the whole layout. Works fine then.

Thanks Egor, and Paul if you read this

User Tag List

Thread: 2 Columns with left column fixed!

Thread Tools

Display

2 Columns with left column fixed!

Bookmarks

Bookmarks

Posting Permissions