CSS Positioning -- elements in lower right-hand, left-hand corner

Question

I want to position "Game on Sep 27" in the lower left-hand corner, across from "Lost 100 chips." But I can't see to get it positioned in the lower left-hand side.

Here's my current CSS:

Any suggestions? Much appreciated!

Answer 1

The easiest way would be to put all three divs (.recentEventsDetail, .recentEventsLowerLeftElement, .recentEventsLowerRightElement) inside a wrapping div with position: relative;. Then you can make lower divs position: absolute; and set placement that way. for example:

<style type="text/css">
  .reventEventsWrapper {position: relative;}
  .recentEventsLowerLeftElement {position: absolute; bottom: 0px; left: 0px;}
  .recentEventsLowerRightElement {position: absolute; bottom: 0px; right: 0px;}
</style>
<div class="reventEventsWrapper">
  <div class="recentEventsDetail"></div>
  <div class="recentEventsLowerLeftElement"></div>
  <div class="recentEventsLowerRightElement"></div>
</div>

Using position relative on the wrapper makes the absolutely positioned children use the origin of that div to calculate position. The only issue here is that you could potentially have overlap. Also youll probably want to add padding-bottom to your wrapper equal to the the height of the left and right divs. this makes sure they never overlap the detail div.

Answer 2

What css do you currently have for .recentEventsLowerLeftElement and .recentEventsLowerRightElement?

To make sure that they are cleared to the next line, I would do something like the following:

<div class="recentEventsLowerElement">
    <div class="recentEventsLowerLeftElement">
    </div>

    <div class="recentEventsLowerRightElement">
    </div>  
</div><!-- end .recentEventsLowerElement -->

.recentEventsLowerElement { clear: both; }

.recentEventsLowerElement .recentEventsLowerLeftElement { float: left; }

.recentEventsLowerELement .recentEventsLowerRightElement { float: right; }