1 Reply Latest reply on Aug 7, 2007 4:07 AM by Newsgroup_User

    css div height question

    totheatom
      hi all.. i tried searching the web for an answer to this question but to no avail.. hopefully someone here can offer some insight....

      Here Is My Website

      ultimately, what i am trying to accomplish is make the background of my website three different colors. as you can see by the link, i have dark green as the top color. light green as the middle. and gray as the bottom.

      i was not sure how to make this work so i set up three different <DIV> tags with 100% width and different colored backgrounds. i figure each will contain another <DIV> that is centered with a width of 760px. the top will be the header. the middle will be the content. and the bottom will be the footer. seems simple enough but i get tripped up with how to set the <DIV> height settings to display all of the content correctly.

      for example, in the page linked above, i figure that the header <DIV> will be roughly 100px in height, the content <DIV> will be roughly 300px (depending on the actual content), and the footer <DIV> will be roughly 100px in height. i could just set fixed heights for all of them and it would probably look alright in 800x600 but in a larger resolution it will look very poorly proportioned. i'd like my content to be centered vertically if it's smaller than the actual screen resolution and also behave normally if it's bigger than the screen res. but how do i go about this?

      i hope i haven't made things sound more complicated than they are..... i really appreciate any advice!!!!
        • 1. Re: css div height question
          Level 7
          > i'd like my content to be centered vertically if it's smaller than the
          > actual
          > screen resolution and also behave normally if it's bigger than the screen
          > res.
          > but how do i go about this?

          You forget about it. Vertical centering is very tricky.

          Also, you forget about constraining the height of the divs, other than with
          the content. If you specify a height, and the contents become taller, they
          will overflow the div. You can use min-height and max-height, but this is
          not supported in IE6 and earlier, so there will be a problem there.

          I'd say, rethink this plan.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "totheatom" <webforumsuser@macromedia.com> wrote in message
          news:f98nf0$182$1@forums.macromedia.com...
          > hi all.. i tried searching the web for an answer to this question but to
          > no
          > avail.. hopefully someone here can offer some insight....
          >
          > http://www.pybaa.org/russweb/index.html
          >
          > ultimately, what i am trying to accomplish is make the background of my
          > website three different colors. as you can see by the link, i have dark
          > green
          > as the top color. light green as the middle. and gray as the bottom.
          >
          > i was not sure how to make this work so i set up three different <DIV>
          > tags
          > with 100% width and different colored backgrounds. i figure each will
          > contain
          > another <DIV> that is centered with a width of 760px. the top will be the
          > header. the middle will be the content. and the bottom will be the
          > footer.
          > seems simple enough but i get tripped up with how to set the <DIV> height
          > settings to display all of the content correctly.
          >
          > for example, in the page linked above, i figure that the header <DIV> will
          > be
          > roughly 100px in height, the content <DIV> will be roughly 300px
          > (depending on
          > the actual content), and the footer <DIV> will be roughly 100px in height.
          > i
          > could just set fixed heights for all of them and it would probably look
          > alright
          > in 800x600 but in a larger resolution it will look very poorly
          > proportioned.
          > i'd like my content to be centered vertically if it's smaller than the
          > actual
          > screen resolution and also behave normally if it's bigger than the screen
          > res.
          > but how do i go about this?
          >
          > i hope i haven't made things sound more complicated than they are..... i
          > really appreciate any advice!!!!
          >