CSS 3 Col stretchy layouts

Discussion in 'HTML' started by Silkster, Oct 5, 2006.

  1. Silkster

    Silkster Guest

    Hi Everyone...
    Ian not sure if this is possible but.. I have created a 3 col layout
    with a stretchy center using pure CSS got it to work in everything..
    sorted..

    But the site Iam working on is aimed at multiple resolutions so it is
    going to scale down to 800x600 and scale up to 1024x768...

    the problem is HOW DO I STOP IT GOING PAST 1024?

    Ideally I would like the container to stop at 1024 in the center of the
    page with a repeating horizontal background going the full page?

    I know I could use javascript get the resolution of the monitor and
    display a correct template but in volves resizing the browser wind
    which I do not like

    Please somebody help
    Silkster, Oct 5, 2006
    #1
    1. Advertising

  2. Hello,

    Silkster wrote:

    > Ian not sure if this is possible but.. I have created a 3 col layout
    > with a stretchy center using pure CSS got it to work in everything..
    > sorted..
    >
    > But the site Iam working on is aimed at multiple resolutions so it is
    > going to scale down to 800x600 and scale up to 1024x768...
    >
    > the problem is HOW DO I STOP IT GOING PAST 1024?
    >
    > Ideally I would like the container to stop at 1024 in the center of the
    > page with a repeating horizontal background going the full page?
    >
    > I know I could use javascript get the resolution of the monitor and
    > display a correct template but in volves resizing the browser wind
    > which I do not like


    The 'max-width' property is properly what you need. Unfortunately it does
    not work in IE6 and lower (don't know about IE7 - I hoped they fixed
    this...). For IE there are fixes, but these require JavaScript to emulate
    this property - IE7 (not to be confused with Internet Explorer 7!) comes to
    my mind. You'll still have to worry about IE users without JavaScript
    though...

    HTH

    --
    Benjamin Niemann
    Email: pink at odahoda dot de
    WWW: http://pink.odahoda.de/
    Benjamin Niemann, Oct 5, 2006
    #2
    1. Advertising

  3. Silkster

    richard Guest

    "Silkster" <> wrote in message
    news:...
    > Hi Everyone...
    > Ian not sure if this is possible but.. I have created a 3 col layout
    > with a stretchy center using pure CSS got it to work in everything..
    > sorted..
    >
    > But the site Iam working on is aimed at multiple resolutions so it is
    > going to scale down to 800x600 and scale up to 1024x768...
    >
    > the problem is HOW DO I STOP IT GOING PAST 1024?
    >
    > Ideally I would like the container to stop at 1024 in the center of the
    > page with a repeating horizontal background going the full page?
    >
    > I know I could use javascript get the resolution of the monitor and
    > display a correct template but in volves resizing the browser wind
    > which I do not like
    >
    > Please somebody help
    >


    The only way you could possibly do it is to have some javascript detect what
    the browser's setting are, then redirect to a page for that resolution.
    Of course, you'd have to know how many that is, and rewrite each page for
    that resolution.
    From what I've seen on stats, very very very few people use anything greater
    than 1024.
    So why bother?
    richard, Oct 5, 2006
    #3
  4. On Oct 6, 4:18 am, "richard" <> wrote:
    > "Silkster" <> wrote in messagenews:...
    >
    > > Hi Everyone...
    > > Ian not sure if this is possible but.. I have created a 3 col layout
    > > with a stretchy center using pure CSS got it to work in everything..
    > > sorted..

    >
    > > But the site Iam working on is aimed at multiple resolutions so it is
    > > going to scale down to 800x600 and scale up to 1024x768...

    >
    > > the problem is HOW DO I STOP IT GOING PAST 1024?

    >
    > > Ideally I would like the container to stop at 1024 in the center of the
    > > page with a repeating horizontal background going the full page?

    >
    > > I know I could use javascript get the resolution of the monitor and
    > > display a correct template but in volves resizing the browser wind
    > > which I do not like

    >
    > > Please somebody help

    > The only way you could possibly do it is to have some javascript detect what
    > the browser's setting are, then redirect to a page for that resolution.
    > Of course, you'd have to know how many that is, and rewrite each page for
    > that resolution.
    > From what I've seen on stats, very very very few people use anything greater
    > than 1024.
    > So why bother?- Hide quoted text -- Show quoted text -


    First of all, sorry for posting this in gg. :( My new employer places
    weird restrictions on our sites and software allowances.

    Anyway, There is (or rather - may be) another way to get around this.
    It involves a little bit of dodgy design table layout, but it does work
    - Please let me know if you find that it doesn't work, or if you make a
    nicer (table-less) version of this that works.

    Put the entire contents inside this....
    <table ><tr><td style="width:47em;">

    AllOtherPageContentGoesHere

    </td></tr></table>

    .... and then simply adjust the 47em to what ever you like.

    This has worked for me in the past.
    Disco Octopus, Oct 6, 2006
    #4
  5. Silkster

    Ed Mullen Guest

    richard wrote:
    >
    > "Silkster" <> wrote in message
    > news:...
    >> Hi Everyone...
    >> Ian not sure if this is possible but.. I have created a 3 col layout
    >> with a stretchy center using pure CSS got it to work in everything..
    >> sorted..
    >>
    >> But the site Iam working on is aimed at multiple resolutions so it is
    >> going to scale down to 800x600 and scale up to 1024x768...
    >>
    >> the problem is HOW DO I STOP IT GOING PAST 1024?
    >>
    >> Ideally I would like the container to stop at 1024 in the center of the
    >> page with a repeating horizontal background going the full page?
    >>
    >> I know I could use javascript get the resolution of the monitor and
    >> display a correct template but in volves resizing the browser wind
    >> which I do not like
    >>
    >> Please somebody help
    >>

    >
    > The only way you could possibly do it is to have some javascript detect
    > what the browser's setting are, then redirect to a page for that
    > resolution.
    > Of course, you'd have to know how many that is, and rewrite each page
    > for that resolution.
    > From what I've seen on stats, very very very few people use anything
    > greater than 1024.
    > So why bother?
    >


    The OP doesn't state what kind of site it is. So I think it's
    ill-advised to suggest to ignore whatever percentage of the potential
    viewing populace is using more than 1024x768. At home I use 128 x 1024.
    Hey, who knows, I just might be the guy who does NOT place the $10,000
    order on the OP's site because it isn't readable for me.

    Better to advise that he create a fluid design that is easily viewed by
    /anyone/ at any resolution.

    --
    Ed Mullen
    http://edmullen.net
    http://mozilla.edmullen.net
    http://abington.edmullen.net
    Time is nature's way of keeping everything from happening all at once.
    Ed Mullen, Oct 6, 2006
    #5
  6. Silkster

    Ed Mullen Guest

    Ed Mullen wrote:
    > richard wrote:
    >>
    >> "Silkster" <> wrote in message
    >> news:...
    >>> Hi Everyone...
    >>> Ian not sure if this is possible but.. I have created a 3 col layout
    >>> with a stretchy center using pure CSS got it to work in everything..
    >>> sorted..
    >>>
    >>> But the site Iam working on is aimed at multiple resolutions so it is
    >>> going to scale down to 800x600 and scale up to 1024x768...
    >>>
    >>> the problem is HOW DO I STOP IT GOING PAST 1024?
    >>>
    >>> Ideally I would like the container to stop at 1024 in the center of the
    >>> page with a repeating horizontal background going the full page?
    >>>
    >>> I know I could use javascript get the resolution of the monitor and
    >>> display a correct template but in volves resizing the browser wind
    >>> which I do not like
    >>>
    >>> Please somebody help
    >>>

    >>
    >> The only way you could possibly do it is to have some javascript
    >> detect what the browser's setting are, then redirect to a page for
    >> that resolution.
    >> Of course, you'd have to know how many that is, and rewrite each page
    >> for that resolution.
    >> From what I've seen on stats, very very very few people use anything
    >> greater than 1024.
    >> So why bother?
    >>

    >
    > The OP doesn't state what kind of site it is. So I think it's
    > ill-advised to suggest to ignore whatever percentage of the potential
    > viewing populace is using more than 1024x768. At home I use 128 x 1024.
    > Hey, who knows, I just might be the guy who does NOT place the $10,000
    > order on the OP's site because it isn't readable for me.
    >
    > Better to advise that he create a fluid design that is easily viewed by
    > /anyone/ at any resolution.
    >


    Hoping it was obvious that I meant to type 1280 x 1024, and not 128 ...
    Sigh. Fingers faster than brain - *again* .

    --
    Ed Mullen
    http://edmullen.net
    http://mozilla.edmullen.net
    http://abington.edmullen.net
    Alzheimer's advantage: New friends every day.
    Ed Mullen, Oct 6, 2006
    #6
    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. Half Dolla 2003

    Can CSS benefit non-liquid layouts?

    Half Dolla 2003, Jul 22, 2003, in forum: HTML
    Replies:
    10
    Views:
    763
    Adrienne
    Jul 26, 2003
  2. Replies:
    3
    Views:
    857
    Neredbojias
    Feb 25, 2007
  3. Ramon F Herrera

    Swing layouts vs. SWT layouts?

    Ramon F Herrera, Nov 10, 2007, in forum: Java
    Replies:
    5
    Views:
    2,633
    Benjamin Toren
    Dec 7, 2009
  4. Joel VanderWerf

    stretchy NVector

    Joel VanderWerf, Jun 30, 2008, in forum: Ruby
    Replies:
    0
    Views:
    89
    Joel VanderWerf
    Jun 30, 2008
  5. Replies:
    8
    Views:
    200
    Eric Sosman
    Apr 20, 2013
Loading...

Share This Page