CSS 3 column layout problem

Discussion in 'HTML' started by Deryck, Aug 18, 2006.

  1. Deryck

    Deryck Guest

    Hi,

    I'm trying to rework someone's site. The original was all done in lots
    of tables by Dreamweaver. I'm trying to implement a CSS solution. The
    site has 3 columns (200px, 400px, 200px) centred in the middle of the
    screen regardless of screen size. I cannot find a CSS 3 column
    equivalent of this. The usual solutions have the 2 200px columns
    positioned absolutely and the centre column expands to fill all of the
    remaining space. While this has advantages it does not match the
    original site's appearance.

    If anyone can point me to the fixed column width solution I'd be very
    grateful.

    Cheers

    Deryck
     
    Deryck, Aug 18, 2006
    #1
    1. Advertising

  2. Deryck

    mbstevens Guest

    On Fri, 18 Aug 2006 13:41:26 +0100, Deryck wrote:
    > I'm trying to implement a CSS solution. The
    > site has 3 columns (200px, 400px, 200px) centred in the middle of the
    > screen regardless of screen size. I cannot find a CSS 3 column
    > equivalent of this. The usual solutions have the 2 200px columns
    > positioned absolutely and the centre column expands to fill all of the
    > remaining space. While this has advantages it does not match the
    > original site's appearance.


    That is because any good template author would reject the idea
    of all three columns being a fixed width. If you find a template
    that matches your specs, it is probably something you should
    avoid.

    If you insist on making a bad page, however, you can modify one of the
    templates you describe so that it has a fixed width center of 400px.

    #centerdiv {
    ...
    ...
    ...
    width:400px;
    ...
    ...
    }
     
    mbstevens, Aug 18, 2006
    #2
    1. Advertising

  3. Deryck

    Deryck Guest

    mbstevens wrote:

    >
    > That is because any good template author would reject the idea
    > of all three columns being a fixed width.


    Out of curiousity, why?

    >
    > If you insist on making a bad page, however, you can modify one of the
    > templates you describe so that it has a fixed width center of 400px.
    >
    > #centerdiv {
    > ...
    > ...
    > ...
    > width:400px;
    > ...
    > ...
    > }



    Thanks. I'd already tried that before posting though and I couldn't get
    it to work. The left and right columns are positioned absolutely with
    respect to the left and right hand sides of the screen. Your solution
    will only work if the screen size is known in advance and everyone uses
    the same screen size. I could position all 3 columns absolutely but then
    the result would be positioned to the left (or right) of the screen
    rather than centered.

    Cheers

    Deryck
     
    Deryck, Aug 18, 2006
    #3
  4. Deryck

    mbstevens Guest

    On Fri, 18 Aug 2006 15:57:41 +0100, Deryck wrote:

    > mbstevens wrote:
    >
    >>
    >> That is because any good template author would reject the idea
    >> of all three columns being a fixed width.

    >
    > Out of curiousity, why?



    Open an 800 pixel fixed-width page with your browser. Now grab the bottom
    right-hand corner with your mouse. Drag it across until the window is
    about 600 pixels wide. That is what some of your visitors will see.
    the will have to right-scroll to see across the page. Now drag it
    until it is about 1200 pixels wide, if your screen will support it. That
    is what some of your other visitors will see. It will be a tiny page in a
    block of wasted screen space.

    > Your solution
    > will only work if the screen size is known in advance and everyone uses
    > the same screen size. I could position all 3 columns absolutely but then
    > the result would be positioned to the left (or right) of the screen
    > rather than centered.


    That is only more evil gas hissing up from fixed-width pages.
    A page on the web cannot be designed as a magazine page is -- it must
    instead be easily usable at any standard browser width. The only real
    solution to that problem is liquid layout. Leaving default font size
    unset helps, too.

    I suggest you also look up about twenty or more back threads on this
    newsgroup, and google for "frozen layout", "liquid layout", "flexible
    layout", and "accessibility", and "usability". The regulars here have
    gone through this too often for most of us to want to thrash through it at
    length yet again.
     
    mbstevens, Aug 18, 2006
    #4
  5. Deryck

    Deryck Guest

    mbstevens wrote:
    > On Fri, 18 Aug 2006 15:57:41 +0100, Deryck wrote:
    >
    >> mbstevens wrote:
    >>
    >>> That is because any good template author would reject the idea
    >>> of all three columns being a fixed width.

    >> Out of curiousity, why?

    >
    >
    > Open an 800 pixel fixed-width page with your browser. Now grab the bottom
    > right-hand corner with your mouse. Drag it across until the window is
    > about 600 pixels wide. That is what some of your visitors will see.
    > the will have to right-scroll to see across the page. Now drag it
    > until it is about 1200 pixels wide, if your screen will support it. That
    > is what some of your other visitors will see. It will be a tiny page in a
    > block of wasted screen space.
    >


    Let me phrase the question more precisely....

    Why is it OK to fixed the width (and position) of 2 columns but not 3?
    The problems illustrated in your examples will hold true when using a
    3-column-with-2-fixed solution if the screen is small/large enough.

    I have a 1900 pixel wide screen. Yes a central column that is 400px wide
    results in unused (I wouldn't say wasted exactly) space BUT a 400px
    column of text can be easier to read quickly than one 1500px wide (I
    believe that's one of the reasons why newspapers use multi column output).

    I'm not sure what either solution would look like on my Nokia 6630 with
    its 176px wide screen.

    >> Your solution
    >> will only work if the screen size is known in advance and everyone uses
    >> the same screen size. I could position all 3 columns absolutely but then
    >> the result would be positioned to the left (or right) of the screen
    >> rather than centered.

    >
    > That is only more evil gas hissing up from fixed-width pages.


    I wasn't advocating it as a recommended solution :)

    > A page on the web cannot be designed as a magazine page is -- it must
    > instead be easily usable at any standard browser width.


    s/cannot/should not/

    Even if it's a dumb idea to do it this way, its what this client wants.
    It can be done simply with 1 table tag, 1 tr tag, 3 x td tags. A fluid
    solution in CSS requires a lot of code and a fixed solution seems to be
    impossible. Whilst I have successfully removed a LOT of unneeded tags
    and style I am annoyed that one table has to remain.

    >
    > I suggest you also look up about twenty or more back threads on this
    > newsgroup, and google for "frozen layout", "liquid layout", "flexible
    > layout", and "accessibility", and "usability". The regulars here have
    > gone through this too often for most of us to want to thrash through it at
    > length yet again.
    >

    Thank you for the suggestion.
    I certainly wouldn't want you thrashing on my account :) When I
    resubscrbed to this NG (after a year or 2's abscence) I didn't have time
    to read the 4000 or so posts that Thunderbird offered to download, just
    the FAQ. When time permits I'll check out the current thinking on liquid
    layout.

    Thanks for your help.


    Cheers,

    Deryck
     
    Deryck, Aug 19, 2006
    #5
  6. Deryck

    mbstevens Guest

    On Sat, 19 Aug 2006 08:48:08 +0100, Deryck wrote:

    > Why is it OK to fixed the width (and position) of 2 columns but not 3?


    If the main center column is fluid, the page as a
    whole can still expand and contract.

    > The problems illustrated in your examples will hold true when using a
    > 3-column-with-2-fixed solution if the screen is small/large enough.
    >
    > I have a 1900 pixel wide screen. Yes a central column that is 400px wide
    > results in unused (I wouldn't say wasted exactly) space BUT a 400px
    > column of text can be easier to read quickly than one 1500px wide (I
    > believe that's one of the reasons why newspapers use multi column output).


    I would imagine that anyone who ran their browser so wide would also have
    their text size set large enough to negate this problem. Otherwise they
    would have dead space in their browser displacing real estate on their
    desktop on almost every page they visited.

    >
    > I'm not sure what either solution would look like on my Nokia 6630 with
    > its 176px wide screen.


    Web standards layout works on hand held computers better than tables.
    It depends on the browser that the device is using, but columns are
    can be allowed to appear one above the other instead of side by side,
    making it unnecessary to do horizontal scrolling.
     
    mbstevens, Aug 19, 2006
    #6
  7. Deryck

    Paul Watt Guest

    "Deryck" <> wrote in message
    news:...
    > Hi,
    >
    > I'm trying to rework someone's site. The original was all done in lots of
    > tables by Dreamweaver. I'm trying to implement a CSS solution. The site
    > has 3 columns (200px, 400px, 200px) centred in the middle of the screen
    > regardless of screen size. I cannot find a CSS 3 column equivalent of
    > this. The usual solutions have the 2 200px columns positioned absolutely
    > and the centre column expands to fill all of the remaining space. While
    > this has advantages it does not match the original site's appearance.
    >
    > If anyone can point me to the fixed column width solution I'd be very
    > grateful.
    >


    Couldnt you define a wrapper div of 800px width then have 3 columns floated
    within that wrapper? ie.

    <style>
    ..wrapper{width:800px;}
    ..leftcol{float:left;width:200px}
    ..centercol{float:left;width:400px}
    ..rightcol{float:left;width:400px}
    </style>

    <body>
    <div class="wrapper">
    <div class="leftcol">something</div>
    <div class="centercol">some more</div>
    <div class="rightcol">even more</div>
    </div>
    </body>

    --
    Cheers

    Paul
    le singe est dans l'arbre
    http://www.paulwatt.info
     
    Paul Watt, Aug 19, 2006
    #7
  8. Deryck

    Deryck Guest

    Paul Watt wrote:
    >
    > Couldnt you define a wrapper div of 800px width then have 3 columns floated
    > within that wrapper? ie.
    >
    >

    <SNIP>

    Thanks Paul, that looks like it might work :)

    Cheers

    Deryck
     
    Deryck, Aug 19, 2006
    #8
  9. On 2006-08-19, Paul Watt wrote:
    >
    >
    >
    > "Deryck" <> wrote in message
    > news:...
    >> Hi,
    >>
    >> I'm trying to rework someone's site. The original was all done in lots of
    >> tables by Dreamweaver. I'm trying to implement a CSS solution. The site
    >> has 3 columns (200px, 400px, 200px) centred in the middle of the screen
    >> regardless of screen size. I cannot find a CSS 3 column equivalent of
    >> this. The usual solutions have the 2 200px columns positioned absolutely
    >> and the centre column expands to fill all of the remaining space. While
    >> this has advantages it does not match the original site's appearance.
    >>
    >> If anyone can point me to the fixed column width solution I'd be very
    >> grateful.
    >>

    >
    > Couldnt you define a wrapper div of 800px width then have 3 columns floated
    > within that wrapper? ie.


    Why would you wnat to? If you define the wrapper at 800px, it will
    only work well in a window that is exactly 800px wide. If the
    window is smaller, it will require horizontal scrolling; if it is
    larger, there will be empty space.

    Define the wrapper by percent (e.g., width:80%;).

    ><style>
    > .wrapper{width:800px;}
    > .leftcol{float:left;width:200px}
    > .centercol{float:left;width:400px}
    > .rightcol{float:left;width:400px}
    ></style>
    >
    ><body>
    ><div class="wrapper">
    ><div class="leftcol">something</div>
    ><div class="centercol">some more</div>
    ><div class="rightcol">even more</div>
    ></div>
    ></body>


    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Aug 19, 2006
    #9
  10. Deryck

    Paul Watt Guest

    "Chris F.A. Johnson" <> wrote in message
    news:...
    > On 2006-08-19, Paul Watt wrote:
    >>
    >>
    >>
    >> "Deryck" <> wrote in message
    >> news:...
    >>> Hi,
    >>>
    >>> I'm trying to rework someone's site. The original was all done in lots
    >>> of
    >>> tables by Dreamweaver. I'm trying to implement a CSS solution. The site
    >>> has 3 columns (200px, 400px, 200px) centred in the middle of the screen
    >>> regardless of screen size. I cannot find a CSS 3 column equivalent of
    >>> this. The usual solutions have the 2 200px columns positioned absolutely
    >>> and the centre column expands to fill all of the remaining space. While
    >>> this has advantages it does not match the original site's appearance.
    >>>
    >>> If anyone can point me to the fixed column width solution I'd be very
    >>> grateful.
    >>>

    >>
    >> Couldnt you define a wrapper div of 800px width then have 3 columns
    >> floated
    >> within that wrapper? ie.

    >
    > Why would you wnat to? If you define the wrapper at 800px, it will
    > only work well in a window that is exactly 800px wide. If the
    > window is smaller, it will require horizontal scrolling; if it is
    > larger, there will be empty space.
    >
    > Define the wrapper by percent (e.g., width:80%;).
    >


    The only reason for defining the wrapper as 800px and not going for a fluid
    percentage is that the OP specifically said he wanted the cols to be
    200px,400px and 200px.
    Whether this is the best way to design pages is another thing all together.


    --
    Cheers

    Paul
    le singe est dans l'arbre
    http://www.paulwatt.info





    >><style>
    >> .wrapper{width:800px;}
    >> .leftcol{float:left;width:200px}
    >> .centercol{float:left;width:400px}
    >> .rightcol{float:left;width:400px}
    >></style>
    >>
    >><body>
    >><div class="wrapper">
    >><div class="leftcol">something</div>
    >><div class="centercol">some more</div>
    >><div class="rightcol">even more</div>
    >></div>
    >></body>

    >
    > --
    > Chris F.A. Johnson <http://cfaj.freeshell.org>
    > ===================================================================
    > Author:
    > Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Paul Watt, Aug 19, 2006
    #10
    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:
    736
    clintonG
    Dec 24, 2004
  2. Replies:
    4
    Views:
    1,304
    dorayme
    Feb 11, 2006
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,015
  4. Replies:
    1
    Views:
    589
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,020
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page