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>
