6 Replies Latest reply on Dec 27, 2008 7:57 AM by amoncur

    Vertical Spacing/Expansion Issue w/ CSS Background

    amoncur Level 1
      I am filling an area with a 500px vertically tiling background image (set to repeat-y). I want this area to always be at least 500px tall, but to automatically expand beyond 500px whenever I put content that takes up more vertical space than 500px. I currently have the area in question set to a height of 500px and the background image is set in a css rule. My problem is that whenever I add content that goes beyond 500px, the content simply "writes over" the rest of the page, as opposed to expanding the area in which I want content contained. Here is my code:

      <div id="content">
      <div id="content-top">
      </div> <!-- end div id="content-top" -->
      <div id="content-middle">
      <p>content goes here</p>
      </div> <!-- end div id="content-middle" -->
      <div id="content-bottom">
      </div> <!-- end div id="content-bottom" -->

      And here are the style rules:

      #content {
      background-color: #0066CC;
      width: 870px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      float: left;
      }
      #content #content-top {
      background-color: #00FFFF;
      height: 50px;
      width: 870px;
      background-image: url(../Images/images/background_top.jpg);
      }
      #content #content-middle {
      width: 870px;
      background-image: url(../Images/images/background_middle.jpg);
      background-repeat: repeat-y;
      padding-top: 0px;
      padding-right: 40px;
      padding-bottom: 0px;
      padding-left: 40px;
      margin: 0px;
      height: 500px;
      }
      #wrapper #content #content-middle p {
      margin: 0px;
      padding: 0px;
      }

      #content #content-bottom {
      background-image: url(../Images/images/background_bottom.jpg);
      height: 36px;
      width: 870px;
      background-repeat: no-repeat;


      Is there a way to constrain the css rules such that my area in question will always be a minimum of 500px (even when no content appears), but will expand vertically when more content is added? The only way I've been able to correctly expand the area is by removing the height specification; however, in that case the area shrinks to less than 500px tall when not enough content is there. Any ideas?

      Thanks!

      Aaron
        • 1. Re: Vertical Spacing/Expansion Issue w/ CSS Background
          Level 7
          http://reference.sitepoint.com/search?q=min-height

          --

          Walt


          "amoncur" <webforumsuser@macromedia.com> wrote in message
          news:gj1ofr$f28$1@forums.macromedia.com...
          >I am filling an area with a 500px vertically tiling background image (set
          >to
          > repeat-y). I want this area to always be at least 500px tall, but to
          > automatically expand beyond 500px whenever I put content that takes up
          > more
          > vertical space than 500px. I currently have the area in question set to a
          > height of 500px and the background image is set in a css rule. My problem
          > is
          > that whenever I add content that goes beyond 500px, the content simply
          > "writes
          > over" the rest of the page, as opposed to expanding the area in which I
          > want
          > content contained. Here is my code:
          >
          > <div id="content">
          > <div id="content-top">
          > </div> <!-- end div id="content-top" -->
          > <div id="content-middle">
          > <p>content goes here</p>
          > </div> <!-- end div id="content-middle" -->
          > <div id="content-bottom">
          > </div> <!-- end div id="content-bottom" -->
          >
          > And here are the style rules:
          >
          > #content {
          > background-color: #0066CC;
          > width: 870px;
          > margin-top: 0px;
          > margin-right: 0px;
          > margin-bottom: 0px;
          > float: left;
          > }
          > #content #content-top {
          > background-color: #00FFFF;
          > height: 50px;
          > width: 870px;
          > background-image: url(../Images/images/background_top.jpg);
          > }
          > #content #content-middle {
          > width: 870px;
          > background-image: url(../Images/images/background_middle.jpg);
          > background-repeat: repeat-y;
          > padding-top: 0px;
          > padding-right: 40px;
          > padding-bottom: 0px;
          > padding-left: 40px;
          > margin: 0px;
          > height: 500px;
          > }
          > #wrapper #content #content-middle p {
          > margin: 0px;
          > padding: 0px;
          > }
          >
          > #content #content-bottom {
          > background-image: url(../Images/images/background_bottom.jpg);
          > height: 36px;
          > width: 870px;
          > background-repeat: no-repeat;
          >
          >
          > Is there a way to constrain the css rules such that my area in question
          > will
          > always be a minimum of 500px (even when no content appears), but will
          > expand
          > vertically when more content is added? The only way I've been able to
          > correctly expand the area is by removing the height specification;
          > however, in
          > that case the area shrinks to less than 500px tall when not enough content
          > is
          > there. Any ideas?
          >
          > Thanks!
          >
          > Aaron
          >


          • 3. Re: Vertical Spacing/Expansion Issue w/ CSS Background
            Level 7
            min-height won't work in IE6, but IE6 renders height as if it was
            min-height. So, to accommodate IE6 you will need a conditional statement
            setting height to the value you use for min-height in your CSS sheet.

            An example from one of my sites:
            <!--[if IE 6]><style>div#p7ABW1.p7AB{height:380px;}</style><![endif]-->

            --

            Walt


            "amoncur" <webforumsuser@macromedia.com> wrote in message
            news:gj25qu$lk$1@forums.macromedia.com...
            > Aha! Thanks!


            • 4. Re: Vertical Spacing/Expansion Issue w/ CSS Background
              amoncur Level 1
              Thanks for the heads up, Walt. I have IE 7 installed on my machine. Is there an effective tool I can use to confirm my conditional statement works in IE 6?
              • 5. Re: Vertical Spacing/Expansion Issue w/ CSS Background
                Level 7
                http://browsershots.org/ Free

                http://www.browsercam.com/Default2.aspx Commercial ($$)

                --

                Walt


                "amoncur" <webforumsuser@macromedia.com> wrote in message
                news:gj3p2t$2g1$1@forums.macromedia.com...
                > Thanks for the heads up, Walt. I have IE 7 installed on my machine. Is
                > there an effective tool I can use to confirm my conditional statement
                > works in IE 6?