Three-column website layout?

Discussion in 'HTML' started by Ikke, Oct 29, 2006.

  1. Ikke

    Ikke Guest

    Hi everybody,

    I'm looking for a very simple three-column website design in css.

    All the examples I've found so far are talking about hacks, tricks and
    other difficult stuff.

    The only thing I need, is a simple layout where the left and right column
    are of a fixed width, and the center needs to stretch between them so the
    entire page is filled.

    I've only recently stopped using tables and started using css for layout,
    so basically I find it hard to believe that this could be so hard.

    Could someone please point me to some examples, or websites that employ
    such a layout (in an easy fashion)?

    Thanks!

    Ikke
     
    Ikke, Oct 29, 2006
    #1
    1. Advertising

  2. Ikke

    dorayme Guest

    In article <Xns986BF2B096AE3ikkehierbe@195.130.132.70>,
    Ikke <> wrote:

    > Hi everybody,
    >
    > I'm looking for a very simple three-column website design in css.
    >
    > All the examples I've found so far are talking about hacks, tricks and
    > other difficult stuff.
    >
    > The only thing I need, is a simple layout where the left and right column
    > are of a fixed width, and the center needs to stretch between them so the
    > entire page is filled.
    >
    > I've only recently stopped using tables and started using css for layout,
    > so basically I find it hard to believe that this could be so hard.
    >
    > Could someone please point me to some examples, or websites that employ
    > such a layout (in an easy fashion)?
    >
    > Thanks!
    >
    > Ikke


    Gee, old B is always suggesting a link for this... where is
    it...? Anyway, perhaps

    http://bluerobot.com/web/layouts/layout3.html

    is too tricky?

    Or

    http://www.glish.com/css/7.asp

    Or just float a div left and right, give them a width in px, and
    give the main content div no width but certainly right and left
    margins in which the floats sit. Don't position anything at all
    under this suggestion. And then come and complain about the
    details. It will be a valuable thread. Start very simply and
    complain loudly at the first sign of trouble (before you
    introduce tons and tons of complexity)

    --
    dorayme
     
    dorayme, Oct 29, 2006
    #2
    1. Advertising

  3. Ikke

    Ikke Guest

    dorayme <> wrote in
    news::

    <snipped>
    > Gee, old B is always suggesting a link for this... where is
    > it...? Anyway, perhaps
    >
    > http://bluerobot.com/web/layouts/layout3.html
    >
    > is too tricky?


    I've seen that page before. The first thing that immediately jumps out of
    the CSS at that page, are the words "ugly" and "hack". So yes :)

    > Or
    >
    > http://www.glish.com/css/7.asp


    Another page I've seen, which employs a hack.

    > Or just float a div left and right, give them a width in px, and
    > give the main content div no width but certainly right and left
    > margins in which the floats sit. Don't position anything at all
    > under this suggestion. And then come and complain about the
    > details. It will be a valuable thread. Start very simply and
    > complain loudly at the first sign of trouble (before you
    > introduce tons and tons of complexity)


    Basically, that's how I started out - a left column, right column, and a
    center one with no width specified.

    It all works fine when the widths are in percentages - but as soon as I
    set the widths left and right in pixels, and drop the width of the center
    column, the right column drops beneath the center.

    Why all this talk about complaining? Is it really that hard to get a
    three column layout? Is it really necessary to employ hacks? If that's
    the case, why does everybody insist on using css instead of tables
    (besides the fact that that's how its supposed to be and
    blahblahblah...).

    Thanks for your reply,

    Ikke
     
    Ikke, Oct 30, 2006
    #3
  4. Ikke wrote:

    > Hi everybody,


    G'day.

    > I'm looking for a very simple three-column website design in css.


    Like this?
    http://benmeadowcroft.com/webdev/csstemplates/3-column.html

    > All the examples I've found so far are talking about hacks, tricks and
    > other difficult stuff.


    Tricks maybe, but "hacks" aren't necessary, and it is not difficult,
    only different.

    > The only thing I need, is a simple layout where the left and right
    > column are of a fixed width, and the center needs to stretch between
    > them so the entire page is filled.


    See above.

    > I've only recently stopped using tables and started using css for
    > layout, so basically I find it hard to believe that this could be so
    > hard.


    It is not hard. It is just a different mindset, or method. Once you
    catch on, and drop tables for layout, you will wonder why you didn't do
    it years ago. CSS layouts are sooo much easier to maintain.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Oct 30, 2006
    #4
  5. dorayme wrote:

    > Gee, old B is always suggesting a link for this... where is
    > it...?


    Am I "old B"?

    Link posted. <g>

    --
    -Old B
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Oct 30, 2006
    #5
  6. Ikke wrote:

    > Why all this talk about complaining?


    The only people who complain are those who can't comprehend the change
    of method.

    > Is it really that hard to get a three column layout?
    > Is it really necessary to employ hacks?


    No and No.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Oct 30, 2006
    #6
  7. Ikke

    BootNic Guest

    > dorayme <> wrote:
    > news:
    > In article <Xns986BF2B096AE3ikkehierbe@195.130.132.70>,
    > Ikke <> wrote:
    >

    [snip]
    > http://www.glish.com/css/7.asp


    [snip]

    This is a 3 column layout, however I do not think it should be referred
    to as "the holy grail".

    http://www.alistapart.com/articles/holygrail

    --
    BootNic Sunday, October 29, 2006 7:45 PM

    "They may forget what you said, but they will never forget how you
    made them feel."
    *Carl W. Buechner*
     
    BootNic, Oct 30, 2006
    #7
  8. Ikke

    dorayme Guest

    In article <Xns986CB26B596Dikkehierbe@195.130.132.70>,
    Ikke <> wrote:

    > Why all this talk about complaining?


    I was intending this in a friendly way, meaning only to start
    simple, show us the result with a url with a "complaint" ie. a
    description of something you find unacceptable (eg, a float drop
    when you squeeze the window less wide... etc) and folk here can
    suggest solutions to address these matters... In this process, a
    url would help...

    --
    dorayme
     
    dorayme, Oct 30, 2006
    #8
  9. Ikke

    dorayme Guest

    In article
    <WGb1h.378697$>,
    "Beauregard T. Shagnasty" <> wrote:

    > dorayme wrote:
    >
    > > Gee, old B is always suggesting a link for this... where is
    > > it...?

    >
    > Am I "old B"?
    >
    > Link posted. <g>


    Yes, you are! :)

    And yes that's the one, I have re bookmarked it as "3-col layout
    css beauregard". No wonder my "Spotlight" search could not find
    it before - it was there but not under a good name. I am coming
    to more and more rely on this search business on my computer.
    Long gone, it seems, are the days when I remember pretty well
    where everything is.

    --
    dorayme
     
    dorayme, Oct 30, 2006
    #9
  10. Ikke

    Andrew Guest

    On Sun, 29 Oct 2006 22:51:14 GMT, Ikke <> wrote:

    >Hi everybody,
    >
    >I'm looking for a very simple three-column website design in css.
    >
    >All the examples I've found so far are talking about hacks, tricks and
    >other difficult stuff.
    >
    >The only thing I need, is a simple layout where the left and right column
    >are of a fixed width, and the center needs to stretch between them so the
    >entire page is filled.
    >
    >I've only recently stopped using tables and started using css for layout,
    >so basically I find it hard to believe that this could be so hard.
    >
    >Could someone please point me to some examples, or websites that employ
    >such a layout (in an easy fashion)?
    >
    >Thanks!
    >
    >Ikke


    Hi Ikke,

    I am very much a beginner at such layouts but I have produced a very
    simple 3 column layout that could serve as a starting point:

    http://www.andrews-corner.org/3_column_header_footer.html

    There are no hacks, tricks or other devices and the page adapts to
    all browser window sizes. HTML and CSS validate with W3C.

    All the best,

    Andrew.
    --

    Andrew
    http://www.andrews-corner.org/
     
    Andrew, Oct 30, 2006
    #10
  11. Ikke

    Ikke Guest

    dorayme <> wrote in news:doraymeRidThis-
    :

    > In article <Xns986CB26B596Dikkehierbe@195.130.132.70>,
    > Ikke <> wrote:
    >
    >> Why all this talk about complaining?

    >
    > I was intending this in a friendly way, meaning only to start
    > simple, show us the result with a url with a "complaint" ie. a
    > description of something you find unacceptable (eg, a float drop
    > when you squeeze the window less wide... etc) and folk here can
    > suggest solutions to address these matters... In this process, a
    > url would help...


    Ah... Sorry, my paranoia self took it a bit harsher than it sounded.

    Thanks for your help!

    Ikke
     
    Ikke, Oct 30, 2006
    #11
  12. Ikke

    Ikke Guest

    "BootNic" <> wrote in news:NXb1h.17785$TV3.11988
    @newssvr21.news.prodigy.com:

    >> dorayme <> wrote:
    >> news:
    >> In article <Xns986BF2B096AE3ikkehierbe@195.130.132.70>,
    >> Ikke <> wrote:
    >>

    > [snip]
    >> http://www.glish.com/css/7.asp

    >
    > [snip]
    >
    > This is a 3 column layout, however I do not think it should be referred
    > to as "the holy grail".
    >
    > http://www.alistapart.com/articles/holygrail


    Thanks for the link! It looks very nice, but again there is an exception
    for IE6 :(

    Ikke
     
    Ikke, Oct 30, 2006
    #12
  13. Ikke

    Ikke Guest

    Andrew <sorry.no.email@post_NG.com> wrote in
    news::

    <snip>
    > Hi Ikke,
    >
    > I am very much a beginner at such layouts but I have produced a very
    > simple 3 column layout that could serve as a starting point:
    >
    > http://www.andrews-corner.org/3_column_header_footer.html
    >
    > There are no hacks, tricks or other devices and the page adapts to
    > all browser window sizes. HTML and CSS validate with W3C.
    >
    > All the best,
    >
    > Andrew.


    Hi Andrew,

    Now this looks like the thing I'm looking for - thanks for posting the
    link!

    Ikke
     
    Ikke, Oct 30, 2006
    #13
  14. Ikke wrote:
    > "BootNic" <> wrote:


    <snip>
    >>
    >> This is a 3 column layout, however I do not think it should be referred
    >> to as "the holy grail".
    >>
    >> http://www.alistapart.com/articles/holygrail

    >
    > Thanks for the link! It looks very nice, but again there is an exception
    > for IE6 :(
    >


    Hey in a perfect world IE would be a compliant browser! 'Tis why in
    general web designers do not like IE.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 30, 2006
    #14
  15. Ikke

    Ikke Guest

    "Jonathan N. Little" <> wrote in
    news:657cd$4546164f$40cba7a4$:

    <snip>
    > Hey in a perfect world IE would be a compliant browser! 'Tis why in
    > general web designers do not like IE.


    I know. But sadly it is still the most popular browser at this moment, and
    that means that one needs to take into account that the website needs to be
    displayed correctly in it.

    Also, one should not ignore the fact that clients usually add IE5.5 as the
    minimum browser requirement for a website - I've even had clients who
    specifically asked me to limit the website to IE users (don't ask why).

    Thanks,

    Ikke
     
    Ikke, Oct 30, 2006
    #15
  16. Ikke wrote:

    > "Jonathan N. Little" <> wrote:
    >> Hey in a perfect world IE would be a compliant browser! 'Tis why in
    >> general web designers do not like IE.

    >
    > I know. But sadly it is still the most popular browser at this
    > moment, and that means that one needs to take into account that the
    > website needs to be displayed correctly in it.


    I find that I have no trouble writing pages that display properly in all
    browsers, so long as I don't try for the unobtainable 'pixel perfect'
    layout, and don't use any kind of (any) browser-specific code.

    I don't care if one browser has .. oh .. a three-pixel difference in a
    margin somewhere. Design a flexible layout and that is not an issue.

    > Also, one should not ignore the fact that clients usually add IE5.5
    > as the minimum browser requirement for a website - I've even had
    > clients who specifically asked me to limit the website to IE users
    > (don't ask why).


    Tell those clients to find a developer who works exclusively in ActiveX.
    Be sure to mention that he might as well turn off the web server for
    about two or three months every year - as that is about how much
    business he will lose with an IE-only site.

    What *is* it with some of these clients? If they know so much, why don't
    they write their own sites? My clients came to me because they don't
    know anything about designing web sites.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Oct 30, 2006
    #16
  17. Ikke

    dorayme Guest

    In article <Xns986C87FAA4DDikkehierbe@195.130.132.70>,
    Ikke <> wrote:

    > Andrew <sorry.no.email@post_NG.com> wrote in
    > news::
    > >
    > > I am very much a beginner at such layouts but I have produced a very
    > > simple 3 column layout that could serve as a starting point:
    > >
    > > http://www.andrews-corner.org/3_column_header_footer.html
    > >
    > > There are no hacks, tricks or other devices and the page adapts to
    > > all browser window sizes. HTML and CSS validate with W3C.
    > >

    >
    > Now this looks like the thing I'm looking for - thanks for posting the
    > link!
    >


    You will soon find the need for things that you may describe as
    tricks (maybe not hacks) as soon as you put in some real content,
    pics, diags and so on. Many templates behave well with just text
    and especially for normal sighted people. There are issues
    surrounding this em-margined layout concerning the desirability
    of the content being squeezed at large font sizes.

    The issues go on and on... (we cannot discuss them too
    enthusiastically here because Travis might be sick of it... :)

    --
    dorayme
     
    dorayme, Oct 30, 2006
    #17
  18. Ikke

    dorayme Guest

    In article
    <i7t1h.383306$>,
    "Beauregard T. Shagnasty" <> wrote:

    > My clients came to me because they don't
    > know anything about designing web sites.


    Me too mainly, thank God. If they know anything, they

    (a) Don't pay me and
    (b) Send men around to beat me up badly.

    --
    dorayme
     
    dorayme, Oct 30, 2006
    #18
  19. Ikke

    Andrew Guest

    On Mon, 30 Oct 2006 12:21:49 GMT, Ikke <> wrote:

    >Andrew <sorry.no.email@post_NG.com> wrote in
    >news::
    >
    ><snip>
    >> Hi Ikke,
    >>
    >> I am very much a beginner at such layouts but I have produced a very
    >> simple 3 column layout that could serve as a starting point:
    >>
    >> http://www.andrews-corner.org/3_column_header_footer.html
    >>
    >> There are no hacks, tricks or other devices and the page adapts to
    >> all browser window sizes. HTML and CSS validate with W3C.
    >>
    >> All the best,
    >>
    >> Andrew.

    >
    >Hi Andrew,
    >
    >Now this looks like the thing I'm looking for - thanks for posting the
    >link!
    >
    >Ikke


    Hi Ikke,

    Glad this will be useful to you. Of course the template represents a
    very basic beginning only and will no doubt need to be modified as
    content is added.

    Andrew.
    --

    Andrew
    http://www.andrews-corner.org/
     
    Andrew, Oct 30, 2006
    #19
  20. Ikke

    Andrew Guest

    On Tue, 31 Oct 2006 07:42:46 +1100, dorayme
    <> wrote:

    snip>>>>>>>>.

    >> >
    >> > I am very much a beginner at such layouts but I have produced a very
    >> > simple 3 column layout that could serve as a starting point:
    >> >
    >> > http://www.andrews-corner.org/3_column_header_footer.html


    snip>>>>>>>>>>>.
    >
    >You will soon find the need for things that you may describe as
    >tricks (maybe not hacks) as soon as you put in some real content,
    >pics, diags and so on. Many templates behave well with just text
    >and especially for normal sighted people. There are issues
    >surrounding this em-margined layout concerning the desirability
    >of the content being squeezed at large font sizes.


    snip>>>>>>>>>>>

    Hi Dorayme,

    Do you think that this particular template would be better served
    with the width in px rather than em for the flanking columns? I have
    seen this done almost as a convention in other sites, but it seems to
    often break the layout at more extreme text resizing. I guess this has
    to balance against the content being squeezed, as you mentioned.

    I am using these templates as a learning tool for myself, perhaps I
    should not have proffered it as an example until I am a little more
    sure of myself :)

    All the best,

    Andrew
    --

    Andrew
    http://www.andrews-corner.org/
     
    Andrew, Oct 30, 2006
    #20
    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. Paul F. Johnson

    Three and four column display

    Paul F. Johnson, Feb 9, 2005, in forum: HTML
    Replies:
    10
    Views:
    830
    Oli Filth
    Feb 10, 2005
  2. richardv2
    Replies:
    2
    Views:
    476
    David Graham
    Jan 21, 2006
  3. Replies:
    1
    Views:
    644
    John Timney \(MVP\)
    Jun 19, 2006
  4. cluthz
    Replies:
    3
    Views:
    490
    cluthz
    Apr 6, 2007
  5. CiscoDon

    Menus and three column pages

    CiscoDon, May 2, 2007, in forum: HTML
    Replies:
    1
    Views:
    335
    Jonathan N. Little
    May 2, 2007
Loading...

Share This Page