1

I'm trying to center a div at the bottom of the page and having no luck. I've scoured the web, but keep turning up nothing when attempting to apply their solutions.

Any chance anyone out there might have a solution? See code below:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
    background-color: aqua;
    height:100%;
    min-height:100%;
}
.centerDiv {
    display: table;
    width:90%; 
    margin:0 auto;
    height:100%;
    min-height:100%;
    text-align: center;
}
.box {
    display: inline-block;
    width: 100px;
    height:100px;
    border: 3px solid #fff;
} 
</style>
</head>
<body>
<div class="centerDiv">
    <div class="box box1" style="background-color:#585858;"> </div>
    <div class="box box2" style="background-color:#118C4E;"> </div>
    <div class="box box3" style="background-color:#C1E1A6;"> </div>
    <div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body> 
</html>
Dan
  • 9,391
  • 5
  • 41
  • 73
paulja
  • 19
  • 2
  • 1. Don't use `display: table;`. 2. Do you mean a footer that stays at the bottom of a page? – royhowie Aug 17 '14 at 21:13
  • possible duplicate of [How to make a footer fixed in the page bottom](http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom) – royhowie Aug 17 '14 at 21:14

3 Answers3

2

I think you mean, that your div will be at the bottom of page. This would help you:

.centerDiv {
    display: block;
    width: 100%; 
    margin: 0 auto;
    height: auto;
    text-align: center;
    position: fixed;
    bottom: 0;
}

Setting position to fixed and div will stay at a place anytime (also when you scroll down).

Patrik Krehák
  • 2,595
  • 8
  • 32
  • 62
  • That did it! Thanks! I've been beating my head against the wall on this one and you'd made it look so easy. Bravo. – paulja Aug 17 '14 at 21:28
  • Please remember to select as correct answer. Also be aware that this means the box will be positioned at the bottom of the viewport (window) even when you scroll up or down the page, unlike a footer which stays all the way at the bottom of the page. – Ian Aug 17 '14 at 22:13
  • Yes, I reminded, that `fixed` will set element at a fixed place. I would like to say, that changing position to `relative` will alse set it to the bottom, but at the end of document. Position `absolute` could do same thing, but it depends on your other elements (or what do you want it for), otherwise it could destroy your whole page. – Patrik Krehák Aug 18 '14 at 15:23
1

The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window. If you want the box to always be at the bottom of the window, then you need to use position: fixed, and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is.

See the demo here for the result with the fixed position.

.centerDiv {
    width:100%; 
    text-align: center;
    position: fixed; 
    bottom: 0;
}
.box {
    display: inline-block;
    width: 100px;
    height:100px;
}

Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. That's a bit tougher to do with CSS. However, it's easy with jQuery, if you don't mind using scripting:

See the demo here for the result using jQuery.

var minheight = $(window).height();
$("body").css("min-height", minheight);

and

body {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%; 
}
.centerDiv {
    width:100%; 
    text-align: center;
    position: absolute; 
    bottom: 0;
}
.box {
    display: inline-block;
    width: 100px;
    height:100px;
    border: 3px solid #fff;
}
Ian
  • 5,704
  • 6
  • 40
  • 72
-2

div element has an align attribute so it can help:

<div align="center"></div>
Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
Gurkan İlleez
  • 1,503
  • 1
  • 10
  • 12