Background css 100% width horizontal scroll

Question

I ran into this problem when I scroll the window horizontally and the footer and header are broken.

Help with CSS

You can check out the live demo here http://yeszindagi.com/

body { font-family: Arial, Helvetica, sans-serif; font-size:1.3em; min-height:100%; } .containerMain { min-height:100%; width: 100%; } .full { width:100%; } .fixed { width:900px; } .footer { border-top:1px dashed #000; margin-top:5px; height:50px; background-color:#F7B200; bottom:0px; position:relative; } 

---------------------------- HTML code ----------------- - ---------------------

  <div class="containerMain"> .... ..... ......... <div class="full footer clear "> <div class="fixed center"> <div class="left"> <ul class="links"> <li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="social right"> <a href="#" target="_blank" title="Facebook"><span class="facebook-mini"></span></a> <a href="#" target="_blank"><span class="twitter-mini" title="Twitter"></span></a> <a href="#" target="_blank"><span class="pinterest-mini" title="Youtube"></span></a> <a href="#" target="_blank"><span class="linkedin-mini" title="Linkedin"></span></a> </div> </div> </div> </div> 

Answer 1

The best way to solve this problem is through CSS.

Apply min-width to your parent container and make sure its children have width: 100% . See below:

 .containerMain { width: 100%; min-width: 900px; } .footer { width: 100%; } 

Answer 2

I offer you one solution with jquery:

 $(window).bind('resize', resizeHandler); function resizeHandler(){ var newWidth = $(document).width(); $('.footerWrapper').css('width', newWidth); } 

Place in the functions the divs that you want to fit into the width of the document and add onload = "resizeHandler ()" to the body.

Answer 3

Below CSS properties should be able to solve the trick.

 .divwithbackground{ overflow-x: hidden;} 

Answer 4

This cannot be achieved with css alone. You need to integrate jquery.

 $('.footer').css({width:$('html').outerWidth()+$(window).scrollLeft()}); 

Try it. Must work!