background css 100% width horizontal scroll issue

Asked 10/7, 2013 at 8:6 Answered 26/4, 2016 at 18:48

css width footer background-color horizontal-scrolling

Please See the issue

I am facing this issue when i scroll the window to horizontal then the footer and header breaks.

Please help with CSS

You can check 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>

Archambault answered 10/7, 2013 at 8:6 Comment(3)

It's because width 100% is the width of the window, not the actual document – Ppm 10/7, 2013 at 8:8

<!DOCTYPE html > <html lang="en" xmlns="w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> – Atrocious 10/7, 2013 at 8:22

body{ overflow-x: hidden;} – Irick 26/4, 2016 at 18:46

The best way to solve this issue is via CSS.

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

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

Goulder answered 25/9, 2013 at 21:50 Comment(0)

I suggest you one solution with jquery:

$(window).bind('resize', resizeHandler);

function resizeHandler(){
var newWidth = $(document).width();

$('.footerWrapper').css('width', newWidth);

}

Put to function divs that you want to fit the document width and add to body onload="resizeHandler()" attribute.

Mither answered 10/7, 2013 at 8:19 Comment(1)

No no this is terrible. Nobody do this – Serpigo 8/1, 2014 at 17:4

Below CSS properties should be able to solve the trick.

.divwithbackground{ overflow-x: hidden;}

Irick answered 26/4, 2016 at 18:48 Comment(0)

-1

This cannot be achieved by css only. You need to have jquery integration.

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

Try this. Should work!

Wilhelmina answered 1/12, 2013 at 18:29 Comment(0)

Recommended topics

Hot tags