html horizontal scrolling

Hi,

i have a simple css example, and i can't understand the behavior of one of my divs, when the horizontal scroll is displayed. so...when my browser window needs to display the horizontal scroll(when the window width is less than my div "content" width(1024px)), my div "footer" (that have the same "content's" parent and 100% width), seems to get an "extra blank space" on the right side. this space grows when I reduce the width of the window. any ideas about how can i get it off, or why it happens??thanks!

heres my code:

css:

<style type="text/css">

        html, body {
           height: 100%;
           width:100%;
           font-family:"Arial Black", Gadget, sans-serif;
           font-size:11px;
           font-variant:normal;
          }

          * {
           margin: 0;
           }

         .wrapper {
           min-height: 100%;
           height: auto !important;
           height: 100%;
          margin: 0 auto -4em;
          }

         #content{
          width:1024px;
          margin:0px auto;
          background-color:#990;
          height:780px;
         }

         .footer, .push {
             height: 4em;
           width:100%;
           }

          #footer-content{
           height:10px;
           background-color:#09F;
           width:100%;
          }
        </style>

html:

<body>
 <div class="wrapper">
        <div id="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p>
        </div>
        <div class="push"></div>
    </div>
    <div class="footer" style="background-color:#900; width:100%;">
        <div id="footer-content"></div>
    </div>
</body>

I'm going to go with this is a side effect of having a statically defined width for your content DIV and having the footer width be defined as 100%.

If you notice the width of the 100% width section always corresponds to the visible width of the window, whereas the statically defined section always remains a static size (as you would expect). When the window size increases the 100% width section expands to fill that size. When the window size contracts it contracts to only fill that window. In that last case where the window goes below 1024px the static DIV stays at 1024 and the dynamic DIV decreases to fit the window, so you get the scroll bar at the bottom because you have the static content outside the visible width of the window. You scroll to the side and the dynamic div remains the same size, that being the visible width of the window and then you see white space next to it.

One solution would be to make the 1024 section a percentage width, say 80%, that way it contracts and expands with the bottom section. Either that or set min-width:1024px on your 100% section.

ansaurus

tags:

views:

answers:

html horizontal scrolling

related questions