How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Dan V.

    How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?

    How do you do a css 2 column layout with header and footer, with the 2nd
    column
    auto-stretching so entire page looks good for 800 x 600 resolution as min.
    and 1024 x 768 resolution as a max?

    Ideally the layout would be centered so it scales better visually.

    This would be great for me.

    Thanks,
    Dan V.


  • Spartanicus

    #2
    Re: How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?

    "Dan V." <d@d.com> wrote:
    [color=blue]
    >How do you do a css 2 column layout with header and footer, with the 2nd
    >column auto-stretching[/color]

    By using a css table (not supported by IE).

    Alternative methods are rare, Google for "fauxcolumn s" for a hack
    suitable for a fixed pixel width "column" (not suitable if the column
    contains text).

    The only other IE compatible method I'm aware of requires kicking IE6
    into quirks mode.
    [color=blue]
    >800 x 600 resolution as min.[/color]

    No such thing, 800x600 is a common Screen Area size, screen resolution
    is the granularity of the pixels expressed as Pixels Per Inch.
    [color=blue]
    >Ideally the layout would be centered so it scales better visually.[/color]

    Layouts should adapt to the available viewport width, rarely is it
    appropriate to try and prevent that from happening, use max-width for
    those rare cases.

    --
    Spartanicus

    Comment

    • Lauri Raittila

      #3
      Re: How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?

      in comp.infosystem s.www.authoring.stylesheets, Spartanicus wrote:[color=blue]
      > "Dan V." <d@d.com> wrote:
      >[color=green]
      > >How do you do a css 2 column layout with header and footer, with the 2nd
      > >column auto-stretching[/color]
      >
      > By using a css table (not supported by IE).
      >
      > Alternative methods are rare, Google for "fauxcolumn s" for a hack[/color]

      That is not very clever, IMHO.
      [color=blue]
      > The only other IE compatible method I'm aware of requires kicking IE6
      > into quirks mode.[/color]

      It is not that hard. Changed my old example little:


      That example has been there for ages, I only added footer and removed
      width.

      It can be done much simpler, this is complicated one, because it answers
      to question how to get border between columns, and it works in IE5...
      (whiout either requirement, it is quite clean solution, but does require
      one extra element, or some tricks.)
      [color=blue][color=green]
      > >Ideally the layout would be centered so it scales better visually.[/color][/color]

      IMHO, that is not good idea.
      [color=blue]
      > Layouts should adapt to the available viewport width, rarely is it
      > appropriate to try and prevent that from happening, use max-width for
      > those rare cases.[/color]

      And use max-width only for stuff that really benefit from it. Like
      paragraphs. Add you use bigger value than you think it is best, as there
      is differences between people, and there is no proof that short column
      are easier to read, when difference is huge. (there is studies about
      subject somewhere in internet, I think I have seen 2 at least.)

      --
      Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
      Utrecht, NL.

      Comment

      • Dan V.

        #4
        Thanks for great: 2 col layout with footer and header and 2nd col stretch and both cols same height.

        This looks good in IE 6 and Firefox 1.0 - which I do most of my testing with
        as they have a lot of market share.
        I kind of forget about IE 5 as I am new and I want to know the basics before
        any hacks.

        If I use this code (with thanks) how can I have the content in the 2nd
        'column' stretch only to say 700 px max. (Max-width is the only way that I
        am aware - but I don't know how many browsers support this for a div.)
        Some of the content will look 'silly' if it stretches past 1024 x 768
        resolution.

        I guess I could assume people won't choose silly widths..?



        "Lauri Raittila" <lauri@raittila .cjb.net> wrote in message
        news:MPG.1c8973 0f1fc11df298a32 b@news.individu al.net...[color=blue]
        > in comp.infosystem s.www.authoring.stylesheets, Spartanicus wrote:[color=green]
        > > "Dan V." <d@d.com> wrote:
        > >[color=darkred]
        > > >How do you do a css 2 column layout with header and footer, with the[/color][/color][/color]
        2nd[color=blue][color=green][color=darkred]
        > > >column auto-stretching[/color]
        > >
        > > By using a css table (not supported by IE).
        > >
        > > Alternative methods are rare, Google for "fauxcolumn s" for a hack[/color]
        >
        > That is not very clever, IMHO.
        >[color=green]
        > > The only other IE compatible method I'm aware of requires kicking IE6
        > > into quirks mode.[/color]
        >
        > It is not that hard. Changed my old example little:
        > http://www.student.oulu.fi/~laurirai...float2col.html
        >
        > That example has been there for ages, I only added footer and removed
        > width.
        >
        > It can be done much simpler, this is complicated one, because it answers
        > to question how to get border between columns, and it works in IE5...
        > (whiout either requirement, it is quite clean solution, but does require
        > one extra element, or some tricks.)
        >[color=green][color=darkred]
        > > >Ideally the layout would be centered so it scales better visually.[/color][/color]
        >
        > IMHO, that is not good idea.
        >[color=green]
        > > Layouts should adapt to the available viewport width, rarely is it
        > > appropriate to try and prevent that from happening, use max-width for
        > > those rare cases.[/color]
        >
        > And use max-width only for stuff that really benefit from it. Like
        > paragraphs. Add you use bigger value than you think it is best, as there
        > is differences between people, and there is no proof that short column
        > are easier to read, when difference is huge. (there is studies about
        > subject somewhere in internet, I think I have seen 2 at least.)
        >
        > --
        > Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
        > Utrecht, NL.[/color]


        Comment

        • Uncle Pirate

          #5
          Re: How to do a css 2-column layout with 2nd column autostretch forpage max. of 1024 x768 resolution?

          Dan V. wrote:
          [color=blue]
          > How do you do a css 2 column layout with header and footer, with the 2nd
          > column
          > auto-stretching so entire page looks good for 800 x 600 resolution as min.
          > and 1024 x 768 resolution as a max?
          >
          > Ideally the layout would be centered so it scales better visually.
          >
          > This would be great for me.
          >
          > Thanks,
          > Dan V.
          >
          >[/color]

          FAQ. Next time, do some searching first.

          Why limit to the resolutions you mentioned? A fluid layout would work
          on both resolutions as well as smaller/bigger.

          What you are looking for is (WARNING, untested off the top of my head):

          <h1>Heading content</h1>
          <div style="width:xx %;float:left">
          (left column content)
          </div>
          <div style="width:xx %;float:left">
          (right column content)
          </div>
          <div style="clear:bo th">
          (footer content)
          </div>

          What I've put here is the minimal amount of css to do what you've asked
          about. Flavor to taste and although I used inline styling, it's better
          to use an external style sheet for most things as it works for an entire
          site then.

          --
          Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
          Webmaster/Computer Center Manager, NMSU at Alamogordo
          Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
          '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
          A zest for living must include a willingness to die. - R.A. Heinlein

          Comment

          • Lauri Raittila

            #6
            Re: Thanks for great: 2 col layout with footer and header and 2nd col stretch and both cols same height.

            in comp.infosystem s.www.authoring.stylesheets, Dan V. wrote:
            [color=blue]
            > I kind of forget about IE 5 as I am new and I want to know the basics before
            > any hacks.[/color]

            That's not bad idea at all. As I said, the example is old. Nowadays I
            wouldn't care about IE5...
            [color=blue]
            > If I use this code (with thanks) how can I have the content in the 2nd
            > 'column' stretch only to say 700 px max. (Max-width is the only way that I
            > am aware - but I don't know how many browsers support this for a div.)[/color]

            max-width is supported quite well, if it is supported. IE don't support
            it, but there is work around. Google for max-width for ie

            You don't want to limit it to 700px
            [color=blue]
            > Some of the content will look 'silly' if it stretches past 1024 x 768
            > resolution.[/color]

            People that run their browser in over that size often use bigger font
            size too. So use something like max-width:60em;

            If you have mixed content (images and text), only apply max-width to
            text. I have seen far too many times that floated images are forced to
            too small space, and other way around, because using incompatible units.
            [color=blue]
            > I guess I could assume people won't choose silly widths..?[/color]

            That is not bad idea either.

            [FU deleted. Don't top post.]


            --
            Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
            Utrecht, NL.

            Comment

            • KiwiBrian

              #7
              Re: How to do a css 2-column layout with 2nd column autostretch?


              "Uncle Pirate" <stan@surecann. com> wrote in message
              news:421f817a$1 @nntp.zianet.co m...[color=blue]
              >
              > What you are looking for is (WARNING, untested off the top of my head):
              >
              > <h1>Heading content</h1>
              > <div style="width:xx %;float:left">
              > (left column content)
              > </div>
              > <div style="width:xx %;float:left">
              > (right column content)
              > </div>
              > <div style="clear:bo th">
              > (footer content)
              > </div>
              >
              > What I've put here is the minimal amount of css to do what you've asked
              > about. Flavor to taste and although I used inline styling, it's better to
              > use an external style sheet for most things as it works for an entire site
              > then.[/color]

              What would be the minimum variation of the above that would give a
              fixed-width left column, and a fluid right column?

              Brian Tozer


              Comment

              • mscir

                #8
                Re: How to do a css 2-column layout with 2nd column autostretch forpage max. of 1024 x768 resolution?

                Dan V. wrote:[color=blue]
                > How do you do a css 2 column layout with header and footer, with the 2nd
                > column
                > auto-stretching so entire page looks good for 800 x 600 resolution as min.
                > and 1024 x 768 resolution as a max?
                > Ideally the layout would be centered so it scales better visually.
                > This would be great for me.
                > Thanks,
                > Dan V.[/color]

                How about this?



                Mike

                Comment

                • Uncle Pirate

                  #9
                  Re: How to do a css 2-column layout with 2nd column autostretch?

                  KiwiBrian wrote:
                  [color=blue]
                  > "Uncle Pirate" <stan@surecann. com> wrote in message
                  > news:421f817a$1 @nntp.zianet.co m...
                  >[color=green]
                  >>What you are looking for is (WARNING, untested off the top of my head):
                  >>
                  >><h1>Heading content</h1>
                  >><div style="width:xx %;float:left">
                  >> (left column content)
                  >></div>
                  >><div style="width:xx %;float:left">
                  >> (right column content)
                  >></div>
                  >><div style="clear:bo th">
                  >> (footer content)
                  >></div>
                  >>
                  >>What I've put here is the minimal amount of css to do what you've asked
                  >>about. Flavor to taste and although I used inline styling, it's better to
                  >>use an external style sheet for most things as it works for an entire site
                  >>then.[/color]
                  >
                  >
                  > What would be the minimum variation of the above that would give a
                  > fixed-width left column, and a fluid right column?[/color]

                  Not sure about minimum but take a look at the link mscir posted. Nice
                  and simple.

                  --
                  Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
                  Webmaster/Computer Center Manager, NMSU at Alamogordo
                  Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
                  '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
                  A zest for living must include a willingness to die. - R.A. Heinlein

                  Comment

                  • Richard

                    #10
                    Re: How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?

                    On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:
                    [color=blue]
                    > How do you do a css 2 column layout with header and footer, with the
                    > 2nd
                    > column
                    > auto-stretching so entire page looks good for 800 x 600 resolution as
                    > min.
                    > and 1024 x 768 resolution as a max?[/color]
                    [color=blue]
                    > Ideally the layout would be centered so it scales better visually.[/color]
                    [color=blue]
                    > This would be great for me.[/color]
                    [color=blue]
                    > Thanks,
                    > Dan V.[/color]


                    box1 { width:1024px; height:768px; }
                    col1 { width:auto; height:768; float:left;}
                    col2 {width:auto: height:768px; float:left;}

                    <div class="box1">
                    <div class="col1">xx xxxxxxx</div>
                    <div class="col2">yy yyyyyyyy</div>
                    </div>



                    Comment

                    • Brian

                      #11
                      Re: How to do a css 2-column layout with 2nd column autostretch forpage max. of 1024 x768 resolution?

                      Richard wrote:[color=blue]
                      > On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:
                      >
                      >[color=green]
                      >>How do you do a css 2 column layout with header and footer[/color]
                      >
                      >
                      > box1 { width:1024px; height:768px; }
                      > col1 { width:auto; height:768; float:left;}
                      > col2 {width:auto: height:768px; float:left;}[/color]

                      There are no HTML elements "box1", "col1", and "col2". Your syntax is
                      bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)
                      [color=blue]
                      > <div class="box1">
                      > <div class="col1">xx xxxxxxx</div>
                      > <div class="col2">yy yyyyyyyy</div>
                      > </div>[/color]

                      You obviously didn't test your code. I'd ask why, but I've already
                      killfiled you.

                      HAND

                      --
                      Brian

                      Comment

                      • mscir

                        #12
                        Re: How to do a css 2-column layout with 2nd column autostretch forpage max. of 1024 x768 resolution?

                        Brian wrote:[color=blue]
                        > Richard wrote:
                        >[color=green]
                        >> On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:
                        >>[color=darkred]
                        >>> How do you do a css 2 column layout with header and footer[/color]
                        >>
                        >> box1 { width:1024px; height:768px; }
                        >> col1 { width:auto; height:768; float:left;}
                        >> col2 { width:auto: height:768px; float:left;}[/color]
                        >
                        > There are no HTML elements "box1", "col1", and "col2". Your syntax is
                        > bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)
                        >[color=green]
                        >> <div class="box1">
                        >> <div class="col1">xx xxxxxxx</div>
                        >> <div class="col2">yy yyyyyyyy</div>
                        >> </div>[/color]
                        >
                        > You obviously didn't test your code. I'd ask why, but I've already
                        > killfiled you.
                        > HAND[/color]

                        They're classes, just place a "." before each of them. I'm surprised you
                        didn't pick up on that. Sometimes I post quickly and overlook small
                        details too.

                        ..box1 { width:1024px; height:768px; }
                        ..col1 { width:auto; height:768; float:left;}
                        ..col2 { width:auto: height:768px; float:left;}

                        Mike

                        Comment

                        • peter

                          #13
                          Re: How to do a css 2-column layout with 2nd column autostretch for page?

                          On Sat, 26 Feb 2005 17:41:51 -0800, mscir <mscir@yahoo.co m> wrote:
                          [color=blue]
                          >Brian wrote:[color=green]
                          >> Richard wrote:
                          >>[color=darkred]
                          >>> On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:
                          >>>
                          >>>> How do you do a css 2 column layout with header and footer
                          >>>
                          >>> box1 { width:1024px; height:768px; }
                          >>> col1 { width:auto; height:768; float:left;}
                          >>> col2 { width:auto: height:768px; float:left;}[/color]
                          >>
                          >> There are no HTML elements "box1", "col1", and "col2". Your syntax is
                          >> bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)
                          >>[color=darkred]
                          >>> <div class="box1">
                          >>> <div class="col1">xx xxxxxxx</div>
                          >>> <div class="col2">yy yyyyyyyy</div>
                          >>> </div>[/color]
                          >>
                          >> You obviously didn't test your code. I'd ask why, but I've already
                          >> killfiled you.
                          >> HAND[/color]
                          >
                          >They're classes, just place a "." before each of them. I'm surprised you
                          >didn't pick up on that. Sometimes I post quickly and overlook small
                          >details too.
                          >
                          >.box1 { width:1024px; height:768px; }
                          >.col1 { width:auto; height:768; float:left;}
                          >.col2 { width:auto: height:768px; float:left;}
                          >
                          >Mike[/color]

                          Following this discussion with huge interest - it is almost exactly
                          the help I need but with a slight difference

                          If they were a <div>element with an id attribute instead of classes,
                          and the left column needed to contain a background image (no repeat) ,
                          and located under the image a background colour of back was required
                          that had a width of around 5% less width of the actual background
                          image above it -

                          And the left column needs to be the same depth as the right column
                          (content dependant)
                          how would that be achieved?

                          http://4wdnz.net/css is as far as I have got - tearing my hair out now
                          :-(

                          tks in advance
                          Peter

                          Comment

                          • peter

                            #14
                            Re: How to do a css 2-column layout with 2nd column autostretch for page?

                            On Sun, 27 Feb 2005 17:12:02 +1300, peter <radworld@gmail .com> wrote:

                            all resolved

                            P
                            [color=blue]
                            >On Sat, 26 Feb 2005 17:41:51 -0800, mscir <mscir@yahoo.co m> wrote:
                            >[color=green]
                            >>Brian wrote:[color=darkred]
                            >>> Richard wrote:
                            >>>
                            >>>> On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:
                            >>>>
                            >>>>> How do you do a css 2 column layout with header and footer
                            >>>>
                            >>>> box1 { width:1024px; height:768px; }
                            >>>> col1 { width:auto; height:768; float:left;}
                            >>>> col2 { width:auto: height:768px; float:left;}
                            >>>
                            >>> There are no HTML elements "box1", "col1", and "col2". Your syntax is
                            >>> bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)
                            >>>
                            >>>> <div class="box1">
                            >>>> <div class="col1">xx xxxxxxx</div>
                            >>>> <div class="col2">yy yyyyyyyy</div>
                            >>>> </div>
                            >>>
                            >>> You obviously didn't test your code. I'd ask why, but I've already
                            >>> killfiled you.
                            >>> HAND[/color]
                            >>
                            >>They're classes, just place a "." before each of them. I'm surprised you
                            >>didn't pick up on that. Sometimes I post quickly and overlook small
                            >>details too.
                            >>
                            >>.box1 { width:1024px; height:768px; }
                            >>.col1 { width:auto; height:768; float:left;}
                            >>.col2 { width:auto: height:768px; float:left;}
                            >>
                            >>Mike[/color]
                            >
                            >Following this discussion with huge interest - it is almost exactly
                            >the help I need but with a slight difference
                            >
                            >If they were a <div>element with an id attribute instead of classes,
                            >and the left column needed to contain a background image (no repeat) ,
                            >and located under the image a background colour of back was required
                            >that had a width of around 5% less width of the actual background
                            >image above it -
                            >
                            >And the left column needs to be the same depth as the right column
                            >(content dependant)
                            >how would that be achieved?
                            >
                            >http://4wdnz.net/css is as far as I have got - tearing my hair out now
                            >:-(
                            >
                            >tks in advance
                            >Peter[/color]

                            Comment

                            • Brian

                              #15
                              Re: How to do a css 2-column layout with 2nd column autostretch forpage max. of 1024 x768 resolution?

                              mscir wrote:[color=blue]
                              > Brian wrote:
                              >[color=green]
                              >> Richard wrote:
                              >>[color=darkred]
                              >>> box1 { width:1024px; height:768px; }
                              >>> col1 { width:auto; height:768; float:left;}
                              >>> col2 { width:auto: height:768px; float:left;}[/color]
                              >>
                              >>
                              >> There are no HTML elements "box1", "col1", and "col2". Your syntax
                              >> is bogus. Even corrected, the code is bogus. (Why set dimensions in
                              >> pixels?)
                              >>
                              >> You obviously didn't test your code.[/color]
                              >
                              > They're classes, just place a "." before each of them.[/color]

                              Yes, I figured that part out.
                              [color=blue]
                              > I'm surprised you didn't pick up on that.[/color]

                              I did pick up on it. "Richard" <Anonymous@127. 001> did not. My question
                              was why he didn't bother testing his code. A css checker would have
                              warned him of the bad syntax.
                              [color=blue]
                              > Sometimes I post quickly and overlook small details too.
                              >
                              > .box1 { width:1024px; height:768px; }
                              > .col1 { width:auto; height:768; float:left;}
                              > .col2 { width:auto: height:768px; float:left;}[/color]

                              Ok, that passes syntax checking, but even that is bad advice. And, at
                              first glance, won't do what the op wanted, either.

                              --
                              Brian

                              Comment

                              Working...