HTMLTree - A Growing Repository for Web Designers and Developers

One of the problems I face with CSS is creating a 2 tier column but having the left column left align, and the right column right align.

I’m a fan of floating all my elements. So I rarely use position absolute.

Then I saw an article on creating a table of content in CSS. Wow, that’s my solution!

So here’s my approach…

CSS

<style type="text/css">
  .container           {position:relative; width:960px; }
  .container div.left  {position:absolute; left:0;}
  .container div.right {position:absolute; right:0;}
</style>

HTML

<div class='container'>
  <div class='left'>This should be left align.</div>
  <div class='right'>And right align.</div>
</div>

And here’s the results:

Since the outer container is position:relative, it will fit nicely anywhere on the page. And the inner divs are position:absolute, which pushes it toward the edge.

These articles are a way for me to store my own tricks and hacks so I can always reference back to it on future projects. But I like to share. Hope it was helpful.