1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need to expand footer to fill whole screen - What am i missing?

Discussion in 'CSS' started by Darius Shojaei, Sep 23, 2013.

0
  1. #1
    Hey guys. I'm trying to expand my footer to fit the whole bottom of my screen on any browser size. The odd thing is i had already pulled this off on this site, but for some reason while i was editing some of the content my footer suddenly shrunk back to the size of my container. I'm a little confused because moments before i edited some code everything was fine, and i can't figure out what i even changed for it to even shrink down to the container size. Anybody have a clue what i am missing in my code?

    My game plan was just to create a footer div outside of my container, and clear:both with the width at 100% to scale to size of any browser to fit the screen. It was working before, did i change anything to create a problem? 

    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
    <div id="bg"><img src="Site_Content/lumbre_bg.jpg" width="100%" height="100%" alt=""></div>
    <div class="container">
        <header>
        <img src="Site_Content/images/images/Lumbre_Mock_03 (2).png" /> <!--Logo-->
        </header>
        <nav>
                <ul> <!--Nav_Bar_Links-->
                <li><a href="#home">Home</a></li>
                <li><a href="#tribe">Tribe</a></li>
                <li><a href="#gear">Gear</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                </ul>
        </nav>
    <div id="banner"><img src="Site_Content/images/images/Lumbre_Mock_2_07.png"/></div>
    <div id="event"><img src="Site_Content/images/images/Lumbre_Mock_2_11.jpg"/></div>
    <div id="facebook"><img src="Site_Content/images/images/Lumbre_Mock_2_13.jpg" /></div>
   
   
<div id="content">
    <article>   
    <h1>Welcome</h1>



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non scelerisque diam, id
adipiscing libero. Maecenas sollicitudin semper nisi, in aliquam lorem lobortis ut. Praesent turpis nibh, consectetur a dolor imperdiet, sodales congue turpis. Proin nibh nulla, pulvinar sed elit id, commodo sagittis est. Nam sed elit et dolor lacinia ornare at eu nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris fringilla vehicula lacus, ac mollis tortor malesuada ac. In suscipit dui urna, vitae malesuada massa pretium sed. Pellentesque feugiat urna diam, sit amet aliquet ante varius non. Quisque fermentum tortor lacus, vel lobortis turpis euismod ut.
    </article>
   
   
  <div class="links">
    <div id="shop">
        <a href="#shop">
        <img border="0" alt="Shop" src="Site_Content/images/images/Lumbre_Mock_2_18.png" width="437" height="126">
        </a></div>
    <div id="training">
        <a href="#training">
        <img border="0" alt="Shop" src="Site_Content/images/images/Lumbre_Mock_2_21.png" width="437" height="126">
        </a></div>
    <div id="tribe">
        <a href="#tribe">
        <img border="0" alt="Shop" src="Site_Content/images/images/Lumbre_Mock_2_23.png" width="437" height="125">
        </a></div>
       
     
        </div> <!--End of Links-->
   
   
   
   
   
   
    </div>
<!--End of Container-->
    <div id="footer">
   
   
   
    </div> <!--End of Footer-->
</body>
</html>

CSS ----------------------------------

/* pushes the page to the full capacity of the viewing area */
html {height:100%;
}
body {height:100%; margin:0; padding:0;
}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;
}

.container {
   
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;

width:960px;
margin:0px auto;
position:relative; /* places the content ontop of the background image */
z-index:1;
   
}

/*Nav Bar*/
nav {
    margin:20px 0px 40px 365px;
}
   
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
margin-right:20px;
font-family:"Times New Roman", Times, serif;
}
a:link,a:visited
{

color:#666;

text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
font-weight:bold;
}

header{
    margin-top:30px;
    margin-left:30px;
}

#banner {
    width:819px;
   
    margin: 0px auto 0px auto;
    margin-bottom:40px;
}
#event {
    width:341px;
    float:left;
    margin-right:30px;
    margin-left:124px;
    margin-bottom:40px;
}
#facebook {
    width:314px;
    float:left;
    margin-right:124;
    margin-bottom:40px;
}

#content {
    position:relative;
    width:820px;
    height:463px;
    margin:0px 70px 120px 70px;
    float:left;
    background-image:url(Site_Content/images/images/Lumbre_Mock_2-Recovered__18_03.png)
   
}

article {
    width:331px;
    height:444;
    background:url(Site_Content/images/images/Lumbre_Mock_2-Recovered_18.png);
    margin:10px 7px 0px 28px;
    float:left;
}
.links {
    float:left;
    width:437px;
   
   
}
#shop {
    width:437;
    float:left;
    height:126;
    margin-top:24px;
}
#training {
    width:437;
    float:left;
    height:126;
    margin-top:14px;
}
#tribe {
    width:437;
    float:left;
    height:126;
    margin-top:14px;
}

   
#footer {
    clear:both;
    width:100%;
    height:276px;
    background-image:url(Site_Content/images/images/Lumbre_Mock_2_20.png)
   
   
}
    HTML:
     
    Darius Shojaei, Sep 23, 2013 IP
  2. Hefaistos

    Hefaistos Active Member

    Messages:
    194
    Likes Received:
    14
    Best Answers:
    9
    Trophy Points:
    63
    Digital Goods:
    1
    #2
    Probably this is just a copy and paste mistake, but html and head starting tags are missing. Also I think you got an unclosed </div> tag , that's why footer comes inside "container", which is limited to the width of 960px.
     
    Hefaistos, Sep 24, 2013 IP
    kk5st likes this.
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Good catch.

    @OP: When something new/odd happens, the W3 validator should be your first move.
    (line numbers are arbitrary, I pasted only the body section into validator.)

    cheers,

    gary
     
    kk5st, Sep 24, 2013 IP
  4. Darius Shojaei

    Darius Shojaei Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Wow. Thanks guys. It seems i did have it right, i just forgot a end </div> tag. I must of somehow erased it when i was editing the content.
     
    Darius Shojaei, Sep 24, 2013 IP