Cascading Style Sheets

Solving Tricky Styling issues

Bottom-Aligning a <div>

Say I've split my page into two columns. In the left column, I have the date and time in a <div>.

  <div id="columns">
    <div id="side">
      <% if @cart %>
        <%= div_hidden_if @cart.line_items.empty?, :id => 'cart' do %>
          <%= render @cart %>
        <% end -%>
      <% end -%>
      <a href="/">Home</a><br />
      <a href="/faq">Questions</a><br />
      <a href="/news">News</a><br />
      <a href="/contact">Contact</a><br />
      <div id="datetime">
        <%= page_datetime %>
    <div id="main">
      <%= yield %>

I want that "datetime" <div> to bottom-align, not to the page, but within the "columns" <div>. (this is subtle, you might think within the "side" <div>, but side's bottom goes down as far as there's content.

It takes two steps.

1) Set the target <div> to be position: absolute and bottom: and however far from the bottom you want to place it.

#side #datetime {
    position: absolute;
    bottom: 0.5em;

2) then, mark the <div> you want it to align on as position: relative

#columns {
    position: relative;

Raw Notes


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License