most simple 3 column CSS layout

Discussion in 'HTML' started by chlori, Jan 18, 2005.

  1. chlori

    chlori Guest

    Hello

    How simple can a 3 column CSS layout be?

    Requirements:
    • Left and right column fixed width, like 10 em
    • Center column flexible
    • Works in (almost) all window sizes
    • Works in (almost) all browsers
    • No absolute positioning
    • Valid HTML + CSS (No workarounds preventing HTML or
    CSS from validating)

    I was thinking of something like
    http://glish.com/css/2.asp but with em widths for the
    left and right columns.

    I like this one, it's valid but has absolute
    positioning and I'm looking for something without.
    http://bluerobot.com/web/layouts/layout3.html

    Is it possible at all? How?

    --
    chlori
    chlori, Jan 18, 2005
    #1
    1. Advertising

  2. chlori wrote:
    > Hello
    >
    > How simple can a 3 column CSS layout be?
    >
    > Requirements:
    > • Left and right column fixed width, like 10 em
    > • Center column flexible
    > • Works in (almost) all window sizes
    > • Works in (almost) all browsers
    > • No absolute positioning
    > • Valid HTML + CSS (No workarounds preventing HTML or CSS from validating)
    >
    > I was thinking of something like http://glish.com/css/2.asp but with em
    > widths for the left and right columns.
    >
    > I like this one, it's valid but has absolute positioning and I'm looking
    > for something without.
    > http://bluerobot.com/web/layouts/layout3.html
    >
    > Is it possible at all? How?


    I always use css-discuss for layout examples. check this page:

    http://css-discuss.incutio.com/?page=ThreeColumnLayouts

    Usually I apply the mehtod suggested by redmelon, but this is with fixed
    widths, and you are looking for a floating one, so maybe this will do it
    for you:

    http://www.redmelon.net/tstme/3colpercent/

    and yes, it's XHTML strict validated...

    HTH
    bernhard


    >



    --
    www.daszeichen.ch
    remove nixspam to reply
    Bernhard Sturm, Jan 18, 2005
    #2
    1. Advertising

  3. chlori

    Richard Guest

    On Tue, 18 Jan 2005 21:27:55 +0100 chlori wrote:

    > Hello


    > How simple can a 3 column CSS layout be?


    > Requirements:
    > • Left and right column fixed width, like 10 em
    > • Center column flexible
    > • Works in (almost) all window sizes
    > • Works in (almost) all browsers
    > • No absolute positioning
    > • Valid HTML + CSS (No workarounds preventing HTML or
    > CSS from validating)


    > I was thinking of something like
    > http://glish.com/css/2.asp but with em widths for the
    > left and right columns.


    > I like this one, it's valid but has absolute
    > positioning and I'm looking for something without.
    > http://bluerobot.com/web/layouts/layout3.html


    > Is it possible at all? How?


    > --
    > chlori


    http://somestuff.batcave.net/

    The simplest 3 col layout there is.
    CSS defines the width and looks.
    Richard, Jan 19, 2005
    #3
  4. chlori

    Nik Coughin Guest

    Richard wrote:
    > On Tue, 18 Jan 2005 21:27:55 +0100 chlori wrote:
    >
    >> Hello

    >
    >> How simple can a 3 column CSS layout be?

    >
    >> Requirements:
    >> . Left and right column fixed width, like 10 em
    >> . Center column flexible
    >> . Works in (almost) all window sizes
    >> . Works in (almost) all browsers
    >> . No absolute positioning
    >> . Valid HTML + CSS (No workarounds preventing HTML or
    >> CSS from validating)

    >
    >> I was thinking of something like
    >> http://glish.com/css/2.asp but with em widths for the
    >> left and right columns.

    >
    >> I like this one, it's valid but has absolute
    >> positioning and I'm looking for something without.
    >> http://bluerobot.com/web/layouts/layout3.html

    >
    >> Is it possible at all? How?

    >
    >> --
    >> chlori

    >
    > http://somestuff.batcave.net/
    >
    > The simplest 3 col layout there is.
    > CSS defines the width and looks.


    Doesn't meet OP's requirements, fixed width and invalid markup.
    Nik Coughin, Jan 19, 2005
    #4
  5. chlori

    Duende Guest

    While sitting in a puddle Nik Coughin scribbled in the mud:

    >> The simplest 3 col layout there is.
    >> CSS defines the width and looks.

    >
    > Doesn't meet OP's requirements, fixed width and invalid markup.


    But simple. :)

    --
    D?
    http://wipkip.biz just to raise my PR
    Duende, Jan 19, 2005
    #5
  6. chlori

    chlori Guest

    Bernhard Sturm schrieb am 18.01.2005 22:28:
    >> Requirements:
    >> • Left and right column fixed width, like 10 em
    >> • Center column flexible


    > Usually I apply the mehtod suggested by redmelon, but this is with fixed
    > widths, and you are looking for a floating one, so maybe this will do it
    > for you:
    >
    > http://www.redmelon.net/tstme/3colpercent/


    This is with %. But I'm looking for this:
    • col left: 10em
    • col right: 10em
    • col center: the rest of the page in between

    --
    chlori
    chlori, Jan 19, 2005
    #6
  7. chlori

    Neal Guest

    chlori <> wrote:

    > This is with %. But I'm looking for this:
    > • col left: 10em
    > • col right: 10em
    > • col center: the rest of the page in between


    Simple. Float L and R columns with 10em width, then put 10em margins
    on center section.
    Neal, Jan 19, 2005
    #7
  8. chlori wrote:
    > Bernhard Sturm schrieb am 18.01.2005 22:28:
    >
    >>> Requirements:
    >>> • Left and right column fixed width, like 10 em
    >>> • Center column flexible

    >
    >
    >> Usually I apply the mehtod suggested by redmelon, but this is with
    >> fixed widths, and you are looking for a floating one, so maybe this
    >> will do it for you:
    >>
    >> http://www.redmelon.net/tstme/3colpercent/

    >
    >
    > This is with %. But I'm looking for this:
    > • col left: 10em
    > • col right: 10em
    > • col center: the rest of the page in between


    so this might do the trick:

    http://www.redmelon.net/tstme/3cols2/

    but you have to set your values for yourself... please check the
    overview as there are all the solutions you asked for:


    http://css-discuss.incutio.com/?page=ThreeColumnLayouts

    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
    Bernhard Sturm, Jan 19, 2005
    #8
  9. chlori

    Toby Inkster Guest

    chlori wrote:

    > • No absolute positioning


    Why not? It can be *very* useful for CSS layouts.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jan 19, 2005
    #9
  10. Toby Inkster wrote:
    > chlori wrote:
    >
    >
    >>• No absolute positioning

    >
    >
    > Why not? It can be *very* useful for CSS layouts.


    that is true... I don't see why one should consider *absolute
    positioning* as something bad... the only drawback of position:xxx; is
    (AFAIK) that IE will lose its capability of dynamically increase or
    decrease relative units for child elements below the position:xxx;
    (font-size is not affected by this, but all other units)

    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
    Bernhard Sturm, Jan 20, 2005
    #10
  11. chlori

    ghoul Guest

    Richard wrote:

    > On Tue, 18 Jan 2005 21:27:55 +0100 chlori wrote:
    >
    >> Hello

    >
    >> How simple can a 3 column CSS layout be?

    >
    >> Requirements:
    >> • Left and right column fixed width, like 10 em
    >> • Center column flexible
    >> • Works in (almost) all window sizes
    >> • Works in (almost) all browsers
    >> • No absolute positioning
    >> • Valid HTML + CSS (No workarounds preventing HTML or
    >> CSS from validating)

    >
    >> I was thinking of something like
    >> http://glish.com/css/2.asp but with em widths for the
    >> left and right columns.

    >
    >> I like this one, it's valid but has absolute
    >> positioning and I'm looking for something without.
    >> http://bluerobot.com/web/layouts/layout3.html

    >
    >> Is it possible at all? How?

    >
    >> --
    >> chlori

    >
    > http://somestuff.batcave.net/
    >
    > The simplest 3 col layout there is.
    > CSS defines the width and looks.


    s is for sicko
    ghoul, Jan 21, 2005
    #11
  12. in alt.html, chlori wrote:
    > Hello
    >
    > How simple can a 3 column CSS layout be?
    >
    > Requirements:
    > • Left and right column fixed width, like 10 em


    OK.

    > • Center column flexible


    OK.

    > • Works in (almost) all window sizes


    3 column layout that works on all window sizes. That is not possible. But
    read on.

    > • Works in (almost) all browsers


    You might be able to do it in maybe 1% of browsers. There is thousands of
    browsers around though.

    > I was thinking of something like
    > http://glish.com/css/2.asp but with em widths for the
    > left and right columns.


    That won't work with ems.

    > I like this one, it's valid but has absolute
    > positioning and I'm looking for something without.
    > http://bluerobot.com/web/layouts/layout3.html


    Why you don't want to use absolute positioning? You can do that using
    absolute positioning so that it works, you don't need use broken code in
    that example.

    Your own URL? (You have you HTML ready already, right?)

    > Is it possible at all? How?


    Float first piece to left, leave middle thingy alone, and float 3rd on
    right. Make center piece inline-block/table. Make side thingies 10em
    width. Set suitable min-width for center piece, so that it is easy to
    read. 10em might be good. Use work around for IE.

    Now it should work on 10em wide window. Problem is that left and right
    cols are before center col on code, and when layout collapses. Depends on
    your content if this is problem.

    It might be possible to make CSS that should put center piece
    first/second, but I don't believe it would be supported, so I don't
    bother reading whole spec again to find out if my understanding of it is
    correct.


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Feb 11, 2005
    #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:
    699
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    987
  3. Replies:
    1
    Views:
    564
    John Timney \(MVP\)
    Jun 19, 2006
  4. xkenneth
    Replies:
    8
    Views:
    330
    Bruno Desthuilliers
    Feb 6, 2008
  5. Replies:
    29
    Views:
    861
    Ben C
    Mar 21, 2008
Loading...

Share This Page