CODEWITHSUNDEEP
csshtml
Pavle Stojanovic
Pavle Stojanovic

Reputation: 535

CSS footer at the bottom but not not at the very bottom

This is making my brain hurt and I need some help, its probably really easy but I can find the answer searching Google.

I want a footer, that's cool all the code on the web shows me how to keep it on the bottom of the page....

I want it to be at the bottom BUT I want it to be about 1-3 cm's from the bottom like this image (below), I just cant get it right please help me ?

Image

HTML CODE:

<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>1page</title>
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>

            <div id="heading1">
                <h1>
                    CSS
                </h1>
            </div>


            <div id="footer">
                <div>Test text</div>
            </div>

        </body>
    </html>

CSS CODE:

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: #DDEEFF;
}

#heading1{
    text-align: center;
}


#footer{

    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;

    text-align: center;
    max-width:400px;

}

Upvotes: 0

Views: 72

Answers (5)

jShoop
jShoop

Reputation: 411

Using position:fixed is a great place to start in the CSS on something wrapped around your "text" element.

For demo: click here

CSS

#footer{
    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    text-align: center;
    max-width:400px;
    margin: 0 auto;
}

.div-wrapper{
    width: 100%; 
    height: 12px; 
    position: fixed; 
    bottom: 100px; 
}
.text{
    margin: 0 auto;
    padding-left: 100px; 
    padding-right: 100px; 
    white-space: nowrap; 
}

HTML

<body>
   <div id="heading1">
      <h1>
         CSS
      </h1>
   </div>

   <div class="div-wrapper">
      <div id="footer">
         <div class="text">Test text</div>
      </div>
   </div>
</body>

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this:

CSS

*{
    margin:0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -35px;
}
.wrapper:after {
    content:"";
    display: block;
}
#footer, .wrapper:after {
    height: 35px;
    text-align: center;
}
#footer div {
    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    max-width:400px;
    min-width:400px;
    display: inline-block;
}

HTML

<div class="wrapper">
    <div id="heading1">
         <h1>CSS</h1>
    </div>
</div>
<div id="footer">
    <div>Test text</div>
</div>

DEMO HERE

Upvotes: 1

Mitul
Mitul

Reputation: 3437

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: #DDEEFF;
}

#heading1{
    text-align: center;
}


#footer{

    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    position:fixed;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    bottom:20px;
    text-align: center;
     width:400px;
     left:50%;
  margin-left:-200px;

}
<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>1page</title>
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>

            <div id="heading1">
                <h1>
                    CSS
                </h1>
            </div>


            <div id="footer">
                <div>Test text</div>
            </div>

        </body>
    </html>

Upvotes: 1

Umair
Umair

Reputation: 880

Please use this css. I am sure you are looking something like this.

html, body{
    padding: 0;
    margin: 0;
    background-color: #DDEEFF;
}

#heading1{
    text-align: center;
}


#footer{

    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;

    text-align: center;
    width:100%;
    position:absolute;
    bottom:5px;

}

Upvotes: 0

Srikanth Pullela
Srikanth Pullela

Reputation: 241

Just add these css margin:0 auto; bottom:0; in #footer 

#footer{
    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    text-align: center;
    max-width:400px;  
    margin:0 auto;
    bottom:0;
}

Upvotes: 0

Related Questions