SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Columns with left column fixed!

    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.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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>

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Edit:


    Cool.


    Quote 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?

  6. #6
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  8. #8
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sadly not, it happens in FF and IE with the above fix, haven't tried in others..

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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

  10. #10
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •