CODEWITHSUNDEEP
htmlcsswidth
punkaceratop
punkaceratop

Reputation: 178

CSS width:100% not fitting the screen

Im trying to make my footer to be at the end of the page, so I'm using position:absolute and bottom:0 to do this. The problem is the background color will not be extended to fit the screen, so I tried using width:100% but now it has extra pixels

this is the example i created http://jsfiddle.net/SRuyG/2/ (sorry it's a bit messy, i'm just starting to learn css)

I also tried the sticky footer from some tutorials i found but it's not working either. So how exactly can I set the footer to the bottom of the page and the background fits the screen size?

Thank you

CSS:

html, body {
    margin: 0;
    padding: 0;
}

body {     
    font: 13px/22px Helvetica, Arial, sans-serif;  
    background: #f0f0f0;  

} 

.contentWrapper{
     min-height: 100%;
     margin-bottom: -142px; 
}

.contentWrapper:after {
  content: "";
  display: block;
  height: 142px; 
}

nav {
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    box-shadow: 0px 0px 4px 4px #888888; 

}

#navBar li{
    display:inline;
}

#navBar li a{
    color: #fff;
    text-decoration: none;
    padding: 25px;
}
#navBar li a:hover{
    background:#fff;
    color: #222;
    text-decoration: none;
    padding: 25px;
}

footer {
    position:absolute;  
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    bottom:0;
    width: 100%;

}

HTML:

<body>  

    <nav>  
        <ul id='navBar'>  
            <li><a href="#">link 1</a></li>  
            <li><a href="#">link 2</a></li>  
            <li><a href="#">link 3</a></li>  
        </ul>
    </nav>  



    <div id="contentWrapper">
        <section id="intro">  
        <header>  
            <h2>Intro</h2>  
        </header>  
        <p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
            Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
            Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
        </p>
        </section>  
    </div>

    <footer>  
            <section id="about">
                <header>
                    <h3>Footer</h3>
                </header>
                <p>some text here. </p>
            </section>
    </footer>  

</body>

Upvotes: 10

Views: 61651

Answers (5)

Ankit Aggarwal
Ankit Aggarwal

Reputation: 370

From below css I have removed the padding property 

footer {
        position:absolute;  
        background: #222;  
        color: #fff;
        list-style: none;
        font-size: 1.2em;
        bottom:0;
        width: 100%;

    }

and add this thing in ur css

 footer section
    {
        margin:10px 20px;

    }

Upvotes: 1

Adrift
Adrift

Reputation: 59859

Try using box-sizing: border-box; to constrain the border and padding areas to the width of the <footer> - as the padding: 10px 20px rule is what's causing the scroll bar to appear.

footer {
    position:absolute;  
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    bottom:0;
    width: 100%;
    box-sizing: border-box;
}

http://jsfiddle.net/SRuyG/4/

Upvotes: 8

sa77
sa77

Reputation: 3603

try this..

remove these rules from the footer..you'll be fine

position:absolute;
bottom:0;
width:100%;

updated fiddle here

Upvotes: 1

David
David

Reputation: 1889

you can remove padding: 10px 20px; from footer and add footer section{margin:10px 20px}

http://jsfiddle.net/SRuyG/5/

Upvotes: 3

mikedugan
mikedugan

Reputation: 2393

Your footer is within the body, which is within the HTML. Since you haven't declared a width, it isn't going to expand any wider than it needs to. For your specific HTML, you should do something like this with your CSS:

body, html {
  width: 100%; // or body { width: 960px; } if you're using a fixed width
}

footer {
  width: 100%;
}

Ultimately, remember that any width set in a percentage is (almost) always going to be in comparison to the parent. 100% of a 50% parent is still 50%. 50% of a 75% parent is only going to yield 37.5% of the total viewport width.

Upvotes: 5

Related Questions