Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: fixed to bottom and centered

I need my footer to be fixed to the bottom of the page and to center it. The contents of the footer may change at all time so I can't just center it via margin-left: xxpx; margin-right: xxpx;

The problem is that for some reason this doesn't work:

#whatever {   position: fixed;   bottom: 0px;   margin-right: auto;   margin-left: auto; } 

I crawled the web and found nothing. I tried making a container div and nada. I tried other combinations and gurnisht. How can I make this happen?

Thanks

like image 351
CamelCamelCamel Avatar asked Jun 09 '09 16:06

CamelCamelCamel


People also ask

How do I center a fixed item in CSS?

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

How do you center the bottom of a page in CSS?

The CSS @bottom-center at-rule is used to style the bottom-center page-margin box in paged media. The bottom-center page-margin box is a variable-width box centered horizontally between the page's left and right border edges and filling the bottom page margin between the bottom-left and bottom-right page-margin boxes.


1 Answers

You should use a sticky footer solution such as this one :

* {     margin: 0; } html, body {     height: 100%; } .wrapper {     min-height: 100%;     height: auto !important;     height: 100%;     margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push {     height: 142px; /* .push must be the same height as .footer */ } 

There are others like this;

* {margin:0;padding:0;}   /* must declare 0 margins on everything, also for main layout components use padding, not  vertical margins (top and bottom) to add spacing, else those margins get added to total height  and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */  html, body, #wrap {height: 100%;}  body > #wrap {height: auto; min-height: 100%;}  #main {padding-bottom: 150px;}  /* must be same height as the footer */  #footer {position: relative;     margin-top: -150px; /* negative value of footer height */     height: 150px;     clear:both;}   /* CLEAR FIX*/ .clearfix:after {content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} 

with the html:

<div id="wrap">      <div id="main" class="clearfix">      </div>  </div>  <div id="footer">  </div> 
like image 53
marcgg Avatar answered Sep 30 '22 22:09

marcgg