CODEWITHSUNDEEP
htmlcssweb
CJR
CJR

Reputation: 3572

Footer shows up in the middle of the page?

My footer doesnt show up at the bottom, it does on all the other pages except this one(code below). the content in the footer shows up at the bottom(wrong positions of the component, but still at the bottom) but the backgroud color is in the middle of the page.

Here is the code:

<footer id="fots">
            <div id="infof">
                <div id="infoc">
                    <ul class="ulfot" id="ulfk">
                        <li><b>Destinatons</b></li>
                        <li>London</li>
                        <li>Sarajevo</li>
                        <li>Istanbul</li>
                        <li>Gothenburg</li>
                    </ul>
                    <ul class="ulfot">
                        <li><b>Flight info</b></li>
                        <li>Before flying</li>
                        <li>When flying</li>
                        <li>After flying</li>
                    </ul>

                </div>
            </div>

            <div id="fotsd">
                <div id="leftis">   
                    <p><b> &copy something </b></p>
                </div>
                <div id="rightis">
                    <a href="#" id="bks">Back to top <span class="glyphicon glyphicon-arrow-up"></span> </a>
                </div>
            </div>  
        </footer>

here is the css:

#infoc{
width: 960px;
display: block;
margin-left: auto;
margin-right: auto;
}
#fots{
background-color: #ebebeb;
width: 100%;
}
#fotsd{
height: 50px;
padding-top:15px;
padding-left: 5px;
padding-right: 5px;
width: 960px;
display: block;
margin-left: auto;
margin-right: auto;
}
#leftis{
width: 300px;
float: left;
font-family: 'Raleway', sans-serif;
}
#rightis{
width: 300px;
float: right;
text-align: right;
color: black;
font-family: 'Raleway', sans-serif;
}
#bks{
color: black;
}
#infof{
width: 100%;
height: 180px;
background-color: gray;
}

Upvotes: 0

Views: 94

Answers (2)

dippas
dippas

Reputation: 60563

If I understand correctly this is what you want: FIDDLE

change this CSS

#fots{
background-color: #ebebeb;
width: 100%;
}

to this:

#fots{
background-color: #ebebeb;
width: 100%;
position:fixed; /*new*/
bottom:0;/*new */
}

and change this CSS:

#infof{
width: 100%;
height: 180px;
background-color: gray;
}

to this:

#infof{
width: 100%;
/*height: 180px;*/ /*removed*/
background-color: gray;
}

Upvotes: 1

J-Dizzle
J-Dizzle

Reputation: 3191

#fots {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 60px; 
   background: #ebebeb;
}

Setting the position to absolute should keep it on the bottom, according to this source (first google result..)

Upvotes: 0

Related Questions