CSS DIV / Footer Not at Bottom
Question
I am having a problem with css...
I made the web page one by one using div containers and after finishing i wanted to put the footer at the bottom..
but now when ever i write something its not going below everything.. Instead it popup's at the middle of the page.. and to the right..
I tried using css and bottom:0; and many other things... But not only the footer but any new container/div is going in the middle of the page not below everything..
.footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
Not working :(
I put css and html code there.. but without images it is messed up.. but still the copyrights are comming to the top... even there... If nothing works i will upload the whole thing to a site so you guys can see it clearly..
6 answers
solution1
1 2013-11-23 10:21:56
What you've done should work.
For example:
<div class="footer"></div>
.footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
height: 100px;
}
Take a look at this fiddle: http://jsfiddle.net/2xLJ6/
solution2
0 2013-11-23 10:31:59
make sure that your footer is out of all other div tags
<style>
.footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
</style>
<body>
<!-- other div elements -->
<!-- footer -->
<div class="footer">whatever text... bla bla bla...</div>
</body>
Hope that helps.....
solution3
0 2013-11-23 10:40:32
check out this fiddle
http://jsfiddle.net/vigneshvdm/AM6MX/1/
HTML
<div class="footer">provide footer text here
</div>
<div class="other"></div>
<div class="other"></div>
CSS
.footer {
position:absolute;
bottom:0px;
width:100%;
background:#6cf;
height: 30px;
text-align:center;
}
.other{
width:100px;
height: 100px;
background:green;
margin-left:30px;
}
In your case the problem is that the BOTTOM position will be overwritten by the TOP value. So you can try giving the top value instead which will work !! You can check it here
solution4
0 2013-11-23 11:07:02
Check this, i have put the footer fixed to the bottom
http://codepen.io/anon/pen/Cdyhv
</div>
<div class="footer">Copy Rights</div>
</body>
.footer {
background-color:#32c0da;
position:fixed;
width:100%;
height:50px;
bottom:0;
left:0;
}
solution5
0 2013-11-23 11:14:03
there ya go... was this what u wanted.. ??
<html>
<head>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
background:#daf0f6 url(images/background_slice.png) repeat-x;
height:100%;
position:relative;
}
.main {
}
.main .background {
background-image:url(images/background.png);
background-repeat:no-repeat;
min-height:100%;
}
.main .background .header {
}
.wrap {
margin: auto;
min-height:100%;
width: 1024px;
}
.wrap .main .background .logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:194px;
height:83px;
}
.wrap .main .background .logo h1, .logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
ul#menu {
margin: 0px;
padding: 0px;
position: absolute;
right: 100px;
top: 26px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}
#slider_container {
background-image:url(images/slider_background.png);
background-repeat:repeat-x;
display:block;
border:1px solid #ffffff;
padding:10px;
overflow:auto;
}
.wrap .main .background .content2 {
width: 1024px;
float:left;
}
.wrap .main .background .content2 .intro {
padding-left: 20px;
padding-top: 5px;
width: 1005px;
height: 200px;
background-image: url(images/content_background.png);
background-repeat: repeat-x;
border:1px solid #ffffff;
}
.wrap .main .background .content2 .intro .intro_font {
font-size: 13px;
}
.wrap .main .background .content2 .intro .intro_font .intro_pic {
padding: 5px;
}
.wrap .main .background .content1 {
width: 1024px;
float:left;
}
.wrap .main .background .content1 .flights {
width: 284px;
background-image: url(images/content_background.png);
background-repeat: repeat-x;
padding-left: 20px;
padding-right: 20px;
float: left;
margin-right: 22px;
border:1px solid #ffffff;
}
.wrap .main .background .content1 .flights .flight_pic {
float: left;
}
.wrap .main .background .content1 .flights .flight_price {
float: right;
}
.wrap .main .background .content1 .cruises {
width: 285px;
height: 195px;
background-image: url(images/content_background.png);
background-repeat: repeat-x;
padding-left: 20px;
padding-right: 20px;
float: left;
margin-right: 22px;
border:1px solid #ffffff;
}
.wrap .main .background .content1 .cruises .cruises_pic {
float: left;
}
.wrap .main .background .content1 .cruises .cruises_price {
float: right;
}
.wrap .main .background .content1 .vacations .vacations_pic {
float: left;
}
.wrap .main .background .content1 .vacations .vacations_price {
float: right;
}
.wrap .main .background .content1 .vacations {
width: 285px;
height: 195px;
background-image:url(images/content_background.png);
background-repeat:repeat-x;
padding-left:20px;
padding-right:20px;
float:left;
border:1px solid #ffffff;
}
.wrap .main .background .content1 h3 {
color:#32c0da;
}
.footer {
background-color:#32c0da;
margin-bottom:0px;
width:100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="background">
<div class="header">
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Tours</a></li>
<li><a href="">Hotels</a></li>
<li><a href="">Cruises</a></li>
<li><a href="">Arrivals</a></li>
<li><a href="">Destinations</a></li>
</ul>
<div class="logo">
<h1>Rippe Travels</h1>
</div>
</div>
<br>
<div class="content2">
<div class="intro">
<h2>Travel planning starts here....</h2>
<p class="intro_font" ><img src="images/intro.png" class="intro_pic" align="right">Whether you’re looking for hotels, flights, cruises or vacation packages, we make it easy to plan and book virtually any trip. Extraordinary starts with Rippe Travels.<br><br>
It may be the vacation of your dreams, but sometimes nightmarish things happen. Choose one of our comprehensive plans, or build the travel insurance package that will give you the peace of mind you need.<br><br>
Protect yourself from theft or lost credit cards with American Express Travelers Cheques. They never expire and are accepted at thousands of locations worldwide. We'll replace them if they're lost or stolen, and we're here to offer assistance 24/7.
</p>
</div>
</div>
<div class="content1">
<div class="flights">
<h3>Flights</h3>
<p>A small descriptive text goes here, about the planes we have.</p>
<img class="flight_pic" src="images/flights.png" alt="flight"><img src="images/flights1.png" alt="price" width="92" height="69" class="flight_price">
</div>
<div class="cruises">
<h3>Cruises</h3>
<p>A small descriptive text goes here, about the planes we have.</p>
<img class="cruises_pic" src="images/cruises.png" alt="cruises">
<img src="images/cruises1.png" alt="price" width="102" height="69" class="cruises_price">
</div>
<div class="vacations">
<h3>Vacations</h3>
<p>A small descriptive text goes here, about the planes we have.</p>
<img class="vacations_pic" src="images/vacations.png" alt="vacations">
<img src="images/vacations1.png" alt="price" width="114" height="69" class="vacations_price">
</div>
</div>
</div>
</div>
</div>
<div style="position:absolute;">
Copyright... bla bla bla.....
</div>
</body>
</html>
solution6
0 2013-11-23 11:31:15
the html page....
<html>
<head>
<link href="booboo.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrap">
<div class="main">
<div class="background">
<div class="header">
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Tours</a></li>
<li><a href="">Hotels</a></li>
<li><a href="">Cruises</a></li>
<li><a href="">Arrivals</a></li>
<li><a href="">Destinations</a></li>
</ul>
<div class="logo">
<h1>Rippe Travels</h1>
</div>
</div>
<br>
<div class="content2">
<div class="intro">
<h2>Travel planning starts here....</h2>
<p class="intro_font" ><img src="images/intro.png" class="intro_pic" align="right">Whether you’re looking for hotels, flights, cruises or vacation packages, we make it easy to plan and book virtually any trip. Extraordinary starts with Rippe Travels.<br><br>
It may be the vacation of your dreams, but sometimes nightmarish things happen. Choose one of our comprehensive plans, or build the travel insurance package that will give you the peace of mind you need.<br><br>
Protect yourself from theft or lost credit cards with American Express Travelers Cheques. They never expire and are accepted at thousands of locations worldwide. We'll replace them if they're lost or stolen, and we're here to offer assistance 24/7.
</p>
</div>
</div>
<div class="content1">
<div class="flights">
<h3>Flights</h3>
<p>A small descriptive text goes here, about the planes we have.</p>
<img class="flight_pic" src="images/flights.png" alt="flight"><img src="images/flights1.png" alt="price" width="92" height="69" class="flight_price">
</div>
<div class="cruises">
<h3>Cruises</h3>
<p>A small descriptive text goes here, about the planes we have.</p>
<img class="cruises_pic" src="images/cruises.png" alt="cruises">
<img src="images/cruises1.png" alt="price" width="102" height="69" class="cruises_price">
</div>
<div class="vacations">
<h3>Vacations</h3>
<p>A small descriptive text goes here, about the planes we have.</p>
<img class="vacations_pic" src="images/vacations.png" alt="vacations">
<img src="images/vacations1.png" alt="price" width="114" height="69" class="vacations_price">
</div>
</div>
</div>
</div>
</div>
<div style="position:absolute;">
Copyright... bla bla bla.....
</div>
</body>
</html>
the booboo.css page..
body {
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
background:#daf0f6 url(images/background_slice.png) repeat-x;
height:100%;
position:relative;
}
.main {
}
.main .background {
background-image:url(images/background.png);
background-repeat:no-repeat;
min-height:100%;
}
.main .background .header {
}
.wrap {
margin: auto;
min-height:100%;
width: 1024px;
}
.wrap .main .background .logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:194px;
height:83px;
}
.wrap .main .background .logo h1, .logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
ul#menu {
margin: 0px;
padding: 0px;
position: absolute;
right: 100px;
top: 26px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}
#slider_container {
background-image:url(images/slider_background.png);
background-repeat:repeat-x;
display:block;
border:1px solid #ffffff;
padding:10px;
overflow:auto;
}
.wrap .main .background .content2 {
width: 1024px;
float:left;
}
.wrap .main .background .content2 .intro {
padding-left: 20px;
padding-top: 5px;
width: 1005px;
height: 200px;
background-image: url(images/content_background.png);
background-repeat: repeat-x;
border:1px solid #ffffff;
}
.wrap .main .background .content2 .intro .intro_font {
font-size: 13px;
}
.wrap .main .background .content2 .intro .intro_font .intro_pic {
padding: 5px;
}
.wrap .main .background .content1 {
width: 1024px;
float:left;
}
.wrap .main .background .content1 .flights {
width: 284px;
background-image: url(images/content_background.png);
background-repeat: repeat-x;
padding-left: 20px;
padding-right: 20px;
float: left;
margin-right: 22px;
border:1px solid #ffffff;
}
.wrap .main .background .content1 .flights .flight_pic {
float: left;
}
.wrap .main .background .content1 .flights .flight_price {
float: right;
}
.wrap .main .background .content1 .cruises {
width: 285px;
height: 195px;
background-image: url(images/content_background.png);
background-repeat: repeat-x;
padding-left: 20px;
padding-right: 20px;
float: left;
margin-right: 22px;
border:1px solid #ffffff;
}
.wrap .main .background .content1 .cruises .cruises_pic {
float: left;
}
.wrap .main .background .content1 .cruises .cruises_price {
float: right;
}
.wrap .main .background .content1 .vacations .vacations_pic {
float: left;
}
.wrap .main .background .content1 .vacations .vacations_price {
float: right;
}
.wrap .main .background .content1 .vacations {
width: 285px;
height: 195px;
background-image:url(images/content_background.png);
background-repeat:repeat-x;
padding-left:20px;
padding-right:20px;
float:left;
border:1px solid #ffffff;
}
.wrap .main .background .content1 h3 {
color:#32c0da;
}
.footer {
background-color:#32c0da;
margin-bottom:0px;
width:100%;
}
think it's time u give me something.....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Get footer at bottom of div
Footer <div> not staying at bottom of page when I scroll - CSS & HTML
CSS: position a div element vertically and horizontally in the center, position footer at the bottom
CSS footer at the bottom but not not at the very bottom
Css: Footer not going to bottom?
placed a footer bottom with CSS
Sticking CSS footer on bottom
CSS keep footer at bottom
CSS Footer not at the bottom of the page
Footer with "bottom:0" CSS attribute
Related Tags