Simple (I think) 2 Col Layout with CSS

Discussion in 'HTML' started by sandravandale@yahoo.com, Sep 27, 2006.

  1. Guest

    Here's what I'd like to do, have two columns #side, and #main
    positioned adjacent to each other. I'd like #main to come first in the
    html if possible so I don't have to scroll past #side every time I look
    at the source, but I can give on this requirement. #side is 188px
    always. #main should expand to use up the rest of the space. Niether
    can be absolutely positioned.

    That's it, should be one of the easiest things to do in css, but I
    can't get it to work. Every time I find something that works in
    firefox, it dies a gruesome death in <clenched teeth> good old loveable
    IE</clenched teeth>. Please, someone, help me out of this rut before I
    go mad.

    Thanks a bundle,
    -Sandra
     
    , Sep 27, 2006
    #1
    1. Advertising

  2. wrote:

    > Here's what I'd like to do, have two columns #side, and #main
    > positioned adjacent to each other. I'd like #main to come first in
    > the html if possible so I don't have to scroll past #side every time
    > I look at the source, but I can give on this requirement. #side is
    > 188px always. #main should expand to use up the rest of the space.


    How about Ben's template?
    <http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html>

    I also have sites that place the navigation sidebar after the content.
    <http://countryrode.com/>

    > Niether can be absolutely positioned.


    Why not?

    --
    -bts
    -Motorcycles defy gravity; cars just suck.
     
    Beauregard T. Shagnasty, Sep 27, 2006
    #2
    1. Advertising

  3. Guest

    Beauregard T. Shagnasty wrote:
    > How about Ben's template?
    > <http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html>
    >
    > I also have sites that place the navigation sidebar after the content.
    > <http://countryrode.com/>


    Thanks, but both use absolute positioning. It's very easy if you do
    that, but it won't work for me.

    > > Niether can be absolutely positioned.

    >
    > Why not?


    I have a footer at the bottom of the page. If either column is
    absolutely positioned, then it won't push the footer down. If it is the
    longest column, the footer will display over it.
     
    , Sep 27, 2006
    #3
  4. richard Guest

    <> wrote in message
    news:...
    > Beauregard T. Shagnasty wrote:
    >> How about Ben's template?
    >> <http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html>
    >>
    >> I also have sites that place the navigation sidebar after the content.
    >> <http://countryrode.com/>

    >
    > Thanks, but both use absolute positioning. It's very easy if you do
    > that, but it won't work for me.
    >
    >> > Niether can be absolutely positioned.

    >>
    >> Why not?

    >
    > I have a footer at the bottom of the page. If either column is
    > absolutely positioned, then it won't push the footer down. If it is the
    > longest column, the footer will display over it.
    >


    What you need is a container for all with no height property.
    That way, whenever what's above the footer is pushed down, so will the
    footer be pushed down.

    You might want to look at the designs at www.oswd.org
    Check out the source code and see how they do it.
     
    richard, Sep 27, 2006
    #4
  5. Guest

    richard wrote:
    > What you need is a container for all with no height property.
    > That way, whenever what's above the footer is pushed down, so will the
    > footer be pushed down.


    Thanks, I should have mentioned that I use a container with 100% height
    to force the footer to the bottom of the viewport (and a negative
    margin to pop it back into view) The footer thus sticks to the bottom,
    unless one of the columns is too long, in which case it sits beneath
    the longest column. This complicates life.

    I found one funky solution.

    #main {
    padding-left: 188px;
    float: left;
    width: 100%;
    }

    #side {
    float: left;
    width: 188px;
    margin-left: -100%;
    }

    The idea is float the main content as far left as it will go, but pad
    the content out so it leaves the first 188px free. Then make the
    sidebar a float left as well, it will try to float after #main, but is
    exactly the width of the viewport off from where it needs to be, hence
    the negative margin. Works in IE 5+ and FF 1.5. Very strange things
    happen in opera, I'm looking into it.

    It's possible position: relative; left: -100% might work in place of
    the negative margin, I haven't tried it yet.

    -Sandra
     
    , Sep 27, 2006
    #5
  6. Guest

    Okay that was more trouble than it's worth. It turns out to be so
    simple to accomplish this if you just put the sidebar first in the
    markup. Oh well.

    Here's the final design I'm going with. If anyone wants to try puting
    #side after #main let me know how it goes for you.

    -Sandra

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    />
    <title>I'd rather be programming</title>

    <style type="text/css">
    html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    }

    #page {
    min-height: 100%;
    }

    /* IE treats height as min-height */
    * html #page {
    height: 100%;
    }

    #main {
    margin-left: 188px;
    }

    #inner_main {
    max-width: 45em;
    }

    #side {
    width: 188px;
    float: left;
    }

    #clrft {
    clear: both;
    height: 100px;
    }

    #footer {
    position: relative;
    height: 77px;
    margin-top: -77px;
    }

    /* Styling stuff */
    #main {
    background-color:#33CC00;
    }
    #side {
    background-color:#00CCFF;
    }
    #footer {
    background-color:#6666FF;
    }
    #page {
    background-color:#CC6666;
    }
    ..hidden {
    display: none;
    }
    </style>

    </head>

    <body>

    <div id="page">

    <div id="side">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    </div>

    <div id="main">
    <div id="inner_main">
    <a href="#" onclick="document.getElementById('hide').className =
    'hidden'; return false">Hide</a>
    <a href="#" onclick="document.getElementById('hide').className = '';
    return false">Show</a>

    <span id="hide">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi.
    </p>
    </span>
    </div>
    </div> <!-- /main -->
    <div id="clrft"></div>
    </div> <!-- /PAGE -->

    <div id="footer">
    Footer
    </div>

    </body>
    </html>
     
    , Sep 27, 2006
    #6
  7. Ed Seedhouse Guest

    On 27 Sep 2006 06:34:39 -0700, wrote:

    >Here's what I'd like to do, have two columns #side, and #main
    >positioned adjacent to each other. I'd like #main to come first in the
    >html if possible so I don't have to scroll past #side every time I look
    >at the source, but I can give on this requirement. #side is 188px
    >always. #main should expand to use up the rest of the space. Niether
    >can be absolutely positioned.
    >
    >That's it, should be one of the easiest things to do in css,


    It is.

    >but I
    >can't get it to work. Every time I find something that works in
    >firefox, it dies a gruesome death in <clenched teeth> good old loveable
    >IE</clenched teeth>. Please, someone, help me out of this rut before I
    >go mad.


    #side gets a "float: left;" and a "width: 188px;"

    # main gets no float and a "margin-left: 189px;"

    That's it. For IE you might need to give either div a "display: block;"
    to fix it's margin bugs.



    Although for a really flexible layout it's better that the margins be in
    ems than pixels.
     
    Ed Seedhouse, Sep 28, 2006
    #7
  8. dorayme Guest

    In article <>,
    Ed Seedhouse <> wrote:

    > >but I
    > >can't get it to work. Every time I find something that works in
    > >firefox, it dies a gruesome death in <clenched teeth> good old loveable
    > >IE</clenched teeth>. Please, someone, help me out of this rut before I
    > >go mad.

    >
    > #side gets a "float: left;" and a "width: 188px;"
    >
    > # main gets no float and a "margin-left: 189px;"
    >
    > That's it. For IE you might need to give either div a "display: block;"
    > to fix it's margin bugs.


    You can give IE less margin (eg. 178px) because it adds some (3
    px) in some of these float situations.

    --
    dorayme
     
    dorayme, Sep 28, 2006
    #8
  9. Toby Inkster Guest

    sandravandale wrote:

    > Niether can be absolutely positioned.


    Why? Absolute positioning can be very effective if used carefully.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Sep 28, 2006
    #9
  10. Toby Inkster wrote:
    > sandravandale wrote:
    >
    >> Niether can be absolutely positioned.

    >
    > Why? Absolute positioning can be very effective if used carefully.
    >

    Yep. I'd say the easiest way to meet your criteria is to define your
    main constant block with a left margin wide enough to accommodate your
    side menu block and absolute position the side menu to the upper left.
    That way your menu markup can follow the content markup in the HTML.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 28, 2006
    #10
  11. Jonathan N. Little wrote:
    > Toby Inkster wrote:
    >> sandravandale wrote:
    >>
    >>> Niether can be absolutely positioned.

    >>
    >> Why? Absolute positioning can be very effective if used carefully.
    >>

    > Yep. I'd say the easiest way to meet your criteria is to define your
    > main constant block with a left margin wide enough to accommodate your

    ^^^^^^^^
    content (sp)
    Damn I gotta proof-read!

    > side menu block and absolute position the side menu to the upper left.
    > That way your menu markup can follow the content markup in the HTML.
    >



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 28, 2006
    #11
  12. richard Guest

    <> wrote in message
    news:...
    > Okay that was more trouble than it's worth. It turns out to be so
    > simple to accomplish this if you just put the sidebar first in the
    > markup. Oh well.
    >
    > Here's the final design I'm going with. If anyone wants to try puting
    > #side after #main let me know how it goes for you.


    Yep. You have to remember that there is a natural flow of order with
    dvisions.
    Say you have 3 columns. You can't put column 3 or 2 first.
     
    richard, Sep 29, 2006
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    751
    clintonG
    Dec 24, 2004
  2. Replies:
    1
    Views:
    606
    John Timney \(MVP\)
    Jun 19, 2006
  3. gmax2006
    Replies:
    1
    Views:
    451
    Andy Dingley
    Jul 18, 2006
  4. Bo
    Replies:
    2
    Views:
    478
    richard
    Jul 25, 2009
  5. Replies:
    8
    Views:
    219
    Eric Sosman
    Apr 20, 2013
Loading...

Share This Page