0

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 :(

http://jsfiddle.net/sDN7w/

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..

Rifshan
  • 153
  • 1
  • 4
  • 13
  • 2
    can you add your html and css full source code here, or can you make a fiddle? – softvar Nov 23 '13 at 10:15
  • Have you set the position of the body to relative and it's height to 100%? – Kamran Ahmed Nov 23 '13 at 10:15
  • You may find your answer here at http://stackoverflow.com/questions/1488565/how-to-stick-a-footer-to-bottom-in-css?rq=1 – Kamran Ahmed Nov 23 '13 at 10:16
  • 1
    I don't know why this question is getting close votes, as OP has tried and also contributed the code, so stop close voting this – Mr. Alien Nov 23 '13 at 10:17
  • In your html body is empty then only footer come to middle of the page.otherwise set height for html body. –  Nov 23 '13 at 10:29
  • The OP way, as soon as the page becomes scrollable, the footer will no longer be tied to the bottom of that page. You have to use some more tricky sticky way. Why not have a look at twitter-bootstrap http://getbootstrap.com/2.3.2/ , your friendly solution to many automated styling – softvar Nov 23 '13 at 10:34
  • Body is relative and has height as 100% – Rifshan Nov 23 '13 at 10:40

6 Answers6

1

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/

Eduardo Casas
  • 578
  • 4
  • 11
  • But that way, as soon as the page becomes scrollable, the footer will no longer be tied to the bottom of that page? – softvar Nov 23 '13 at 10:34
  • To have it positioned at the bottom even when scrolling you need to use `position:fixed` – damian Nov 23 '13 at 10:52
  • I dont want it to scroll.. I need the footer at the end of the page.. like most other normal pages.. – Rifshan Nov 23 '13 at 10:53
0

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.....

SRC SRC
  • 87
  • 2
  • 10
0

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

Vignesh Subramanian
  • 7,161
  • 14
  • 87
  • 150
0

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;
}
Nibbler
  • 334
  • 1
  • 3
  • 15
0

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>
SRC SRC
  • 87
  • 2
  • 10
  • Yeah.. Thats pretty much what i want.. What changes did you do? and i want to keep css file seperate.. – Rifshan Nov 23 '13 at 11:23
0

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.....

SRC SRC
  • 87
  • 2
  • 10