Need help with layout

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Ted Hopp
    #1

    Need help with layout

    I'm trying to create the following layout and would appreciate help.

    +----------------+
    | header | variable height
    +------+---------+
    | | stuff | 150 pixels, content variable height & centered vertically
    | +---+---------+
    | | more |
    | | |
    +--+-------------+
    | footer |
    +----------------+

    Also, the area to the left of 'stuff' and 'more' will have a background
    image that visually wraps around the top left corner of 'more'.

    The vertical centering inside 'stuff' is a standard problem, I think. The
    only (cross-browser) approaches I know are to either use tables (yuck) or
    nest a div or two using display:table and display:table-cell (yuck again).

    I think I can do it by enclosing each of 'stuff' and 'more' in a full-width
    div with left padding, fixing the height for the div containing 'stuff', and
    displaying the background image in both enclosing divs. But this seems kind
    of ugly. Is there a better way?

    TIA

    Ted Hopp


    Tags: None
    • dorayme
      #2
      Re: Need help with layout

      In article <Nv-dnZBch5Ki2VvYnZ 2dnUVZ_uejnZ2d@ rcn.net>,
      "Ted Hopp" <ted@zigzagworl d.comwrote:
      I'm trying to create the following layout and would appreciate help.
      >
      +----------------+
      | header | variable height
      +------+---------+
      | | stuff | 150 pixels, content variable height & centered vertically
      | +---+---------+
      | | more |
      | | |
      +--+-------------+
      | footer |
      +----------------+
      >
      Also, the area to the left of 'stuff' and 'more' will have a background
      image that visually wraps around the top left corner of 'more'.
      >
      The vertical centering inside 'stuff' is a standard problem, I think. The
      only (cross-browser) approaches I know are to either use tables (yuck) or
      nest a div or two using display:table and display:table-cell (yuck again).
      >
      I think I can do it by enclosing each of 'stuff' and 'more' in a full-width
      div with left padding, fixing the height for the div containing 'stuff', and
      displaying the background image in both enclosing divs. But this seems kind
      of ugly. Is there a better way?
      >
      TIA
      >
      Ted Hopp
      Why don't you show us your best shot and we go from there. URL

      --
      dorayme

        Comment

        • Ben C
          #3
          Re: Need help with layout

          On 2007-02-04, Ted Hopp <ted@zigzagworl d.comwrote:
          I'm trying to create the following layout and would appreciate help.
          >
          +----------------+
          >| header | variable height
          +------+---------+
          >| | stuff | 150 pixels, content variable height & centered vertically
          >| +---+---------+
          >| | more |
          >| | |
          +--+-------------+
          >| footer |
          +----------------+
          >
          Also, the area to the left of 'stuff' and 'more' will have a background
          image that visually wraps around the top left corner of 'more'.
          >
          The vertical centering inside 'stuff' is a standard problem, I think. The
          only (cross-browser) approaches I know are to either use tables (yuck) or
          nest a div or two using display:table and display:table-cell (yuck again).
          Right, I think those are basically your cross-browser options.

          I thought Spartanicus had a good page about vertical centering, but I
          couldn't find it.

          Bottom line is that vertical centering of a little auto-height block of
          text requires inline-block or table. If the height's not auto there are
          more options.
          I think I can do it by enclosing each of 'stuff' and 'more' in a full-width
          div with left padding, fixing the height for the div containing 'stuff', and
          displaying the background image in both enclosing divs. But this seems kind
          of ugly. Is there a better way?
          Perhaps I haven't understood what you're doing, but why not put the
          background image on the common parent of stuff and more, and give stuff
          and more either transparent background or left margins (instead of
          padding) or both?

            Comment

            • Spartanicus
              #4
              Re: Need help with layout

              Ben C <spamspam@spam. eggswrote:
              >I thought Spartanicus had a good page about vertical centering, but I
              >couldn't find it.
              Lauri Raittila http://www.student.oulu.fi/~laurirai/www/css/middle/

              --
              Spartanicus

                Comment

                • Ben C
                  #5
                  Re: Need help with layout

                  On 2007-02-04, Spartanicus <invalid@invali d.invalidwrote:
                  Ben C <spamspam@spam. eggswrote:
                  >
                  >>I thought Spartanicus had a good page about vertical centering, but I
                  >>couldn't find it.
                  >
                  Lauri Raittila http://www.student.oulu.fi/~laurirai/www/css/middle/
                  Thanks, that was the page I was thinking of.

                    Comment

                    Previous template Next
                    Working...