How to make footer use 100% width of the webpage?

StackOverflow https://stackoverflow.com/questions/22859315

  •  27-06-2023
  •  | 
  •  

Question

Here is my HTML:

 <body>
     <nav>
       <div id="navBar">
        <ul> 
         <li><a href="esileht.html">ESILEHT</a></li>
         <li><a href="uudised.html">UUDISED</a></li>
         <li><a href="ülevaated.html">ÜLEVAATED/ARVUSTUSED</a></li>
         <li><a href="login.html" id="logimine">LOGI SISSE</a></li>
        </ul>
       </div>
     </nav>
     <div class="content">
      <div id="logo">
       <img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
      </div>
      <div id="tervitus">
       <h3 id="tere">TERE TULEMAST</h3>
      </div>  
     </div>
     <div class="artikkel">
      <p>check check</p>
     </div>
     <footer>&copy;2014 Janno.</footer>
    </body>
    </html>

Here is my CSS:

#navBar{
 width: 100%;
 float: left;
 position: absolute;
 top: 0;
 background-color: #000000;
 left: 0;
 min-width:760px;
}

#navBar ul{
 list-style:none;
 margin: 0 auto;
}

#navBar li{
 float: left;
}

#navBar li a:link , a:visited{
 font-size: 90%;
 display: block;
 color: #ffffff;
 padding: 20px 25px;
 font: 18px "open sans", sans-serif;
 font-weight: bold;
 text-decoration: none;
}

#navBar li a:hover{
 background-color: #F0F0F0;
 color: #000000;
 text-decoration: none;
}

#logimine{

}

body{
 margin: 15px;
 padding: 15px;
 background-color: #F0F0F0;
 min-width: 700px;
}

.content, .artikkel{
 max-width: 65%;
 margin: 1em auto;
 box-shadow: 0 3px 7px rgba(0,0,0,.8);
 background-color: #ffffff;
 padding: 3em;
 padding-bottom: 350px;
 margin-bottom:50px;
}

#tervitus{
 background-color: black;
 color: white;
 font: 18px "open sans", sans-serif;
 font-weight: bold;
}

#tere{
 margin-left: 5px;
}

#logo{

}

#regnupp{
 color: blue; /*miks see valge on muidu*/
}

.uudised{
 max-width: 65%;
 margin: 4em auto;
 box-shadow: 0 3px 7px rgba(0,0,0,.8);
 background-color: #ffffff;
 padding: 3em;
 padding-bottom: 350px;
 margin-bottom:50px;
}

.uudised{
 padding-left: 115px;
}

.uudised img{
 float: left;
 width: 100px;
 margin-left: -75px;
}

.uudised p, h2{
 margin-left: 50px;
}

.uudised hr{
 margin-top: 50px;
 margin-bottom: 50px;
}

footer {
 text-align: center;
 margin: 0 auto -40px;
 width: 100%;
 padding-top: 5px;
 padding-bottom: 5px;
 font-weight:300;
 color:#ffffff;
 background-color:#000000;  
}

If I understand correctly, the <footer>, when using width: 100%; looks like the width of the <body> element, so I tried quite a few things and nothing. This is my first try at a webpage, so is there anything I can do, to have the <footer> use the entirety of the page width, without drastically changing everything?
Also I have tried quite a few things that people have suggested, but always it seems that the footer leaves some space on the left side of the page and when I manually try to move it, dosent seem to work too well.
Thanks!

Was it helpful?

Solution 2

The footer take 100% of your body width. The problem is that the body has a default value for margin and padding, you can set to 0 with this :

body {
    margin: 0;
    padding: 0;
}

OTHER TIPS

just remove from the body margin: 15px; padding: 15px; then the footer width might be 100%

You know that browsers give the body element some white space you can remove this by...

body {
margin:0px;
}

After this you can give the navbar a 100% width this should remove white space. I think you mean this?

You have 15px margin and padding on body it have to be 0, but don't just delete margin you still have to write a margin of 0, because as default It has a margin.

body {
    margin: 0;
}

#navBar{
 min-width:760px;
 width: 100%;
 float: left;
 position: absolute;
 top: 0;
 background-color: #000000;
 left: 0;
}

just re arrange your style definition, make min-width to top or before width:100%.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top