1

I want to vertically align a div element in HTML to the bottom of a viewport, but also horizontally align the same div to the document/page, or an element thereof.

For instance, say I have a div as such:

<html>
<head>
  <style type="text/css">
  * {
    margin: 0;
  }
  #wrapper {
    margin: 0 auto;
    width: 1000px;
    min-height: 2000px;
    background: #FF0000;
  }
  </style>
</head>
<body>
  <div id="wrapper">wrapper</div>
</body>
</html>

I would like to make a new div, that is affixed to the bottom of the viewport, but is aligned with the div shown. For the sake of brevity, let's assume the div I want to align is the same width as the one shown, and I want to left align it with the one shown.

My naive attempt is as follows:

<html>
<head>
  <style type="text/css">
  * {
    margin: 0;
  }
  #wrapper {
    margin: 0 auto;
    width: 1000px;
    min-height: 2000px;
    background: #FF0000;
  }
  #footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 1000px;
    height: 100px;
    margin-left: -500px;
    background: #00FF00;
  }
  </style>
</head>
<body>
  <div id="wrapper">wrapper</div>
  <div id="footer">footer</div>
</body>
</html>

This solution works so long as the viewport is larger than 1000px wide. Once the window is made smaller than 1000px, the solution breaks; the footer no longer scrolls horizontally with the rest of the page. Also note that if the document is "taller" than the viewport, the footer div should remain affixed to the bottom of the viewport.

Nathan Schulte
  • 125
  • 2
  • 12

2 Answers2

0

You should use two divs for this. The first aligns itself at the bottom of the page with styles:

.wrapper {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color: red;
}

Then the footer which is contained by the footer-wrapper contains your actual footer info (I'm calling that which you want to align at the bottom of the page the footer...

.footer {
    width: 50%;
    margin: 0 auto;
    background-color: green;
}

See it in action:

http://jsfiddle.net/C3rhX/1/

deed02392
  • 4,799
  • 2
  • 31
  • 48
  • Thanks for your answer. Unfortunately, this solution doesn't align the div (the footer) to the bottom of the viewport. Instead, it aligns it to the bottom of the document/page. Perhaps the wording of my question wasn't clear enough; should I attempt to reword it? Otherwise, care to give it another try? – Nathan Schulte Mar 21 '12 at 09:08
  • Ah I'm not familiar with the concept of viewports, if you mean these meta tag viewports for mobile websites? If not, then yes please reword it and I'll have another go! – deed02392 Mar 21 '12 at 09:14
  • I didn't read through this whole article, but it explains what I mean by "viewport": http://www.quirksmode.org/mobile/viewports.html. What I'm referring to "viewport" is essentially the browser window. – Nathan Schulte Mar 21 '12 at 09:18
  • Oh sure, well in that case just make the footer-wrapper `position: fixed;`. How's that? – deed02392 Mar 21 '12 at 09:31
  • Note quite working as I'm hoping: http://jsfiddle.net/C3rhX/10/. When the window is < 400px wide, the footer doesn't scroll horizontally with the page. – Nathan Schulte Mar 21 '12 at 09:42
  • Well now `position: absolute` is your friend again! http://jsfiddle.net/C3rhX/13/ – deed02392 Mar 21 '12 at 09:52
  • I'm being hinted that we might be having an extended discussion; perhaps we're doing it wrong... That solution doesn't stay at the bottom of the viewport if you scroll vertically (window/viewport < height of content), :(. – Nathan Schulte Mar 21 '12 at 10:00
  • Well it looks like your solution might require some dynamic styling. I've just realised the paradox of trying to get a fixed style to scroll - how about this: http://stackoverflow.com/questions/4676131/how-do-i-get-a-fixed-position-div-to-scroll-horizontally-with-the-content-using – deed02392 Mar 21 '12 at 10:16
0
<html>
    <head>
          <style type="text/css">
          * {
            margin: 0;
          }
          #outer
          {     
            width: 1000px;
            margin: 0 auto;
            height: 100%;
          }
          #wrapper {
            min-height: 800px;
            background: red;
          }
          #footer {
            position: absolute;
            bottom: 0;
            width: 1000px;
            height: 100px;
            background: lime;
            display: block;
          }
          </style>
        </head>
        <body>

        <div id="outer">
          <div id="wrapper">wrapper</div>
          <div id="footer">footer</div>
        </div>

        </body>
    </html>
gingerbreadboy
  • 7,386
  • 5
  • 36
  • 62