Positioning one div to the right of another

Question

I have the following html and css. But what I can't figure out is how to have the tabs div at the right of the main div. So that they stick out the right like bookmarks.

.main {
    -moz-border-radius:10px;
    height: 75%;
    width: 60%;
    position: absolute;
    top: 15%;
    left: 20%;
    right: auto;
  }
.tabs {
    width: 50px;
    height: 1.3em;
    position: absolute;
    float: right;
}
 #tab { margin: 10px 10px 10px 0px;}

And the html:

<div class="main">
    <div id="content">
       Some main content
    </div>
 </div>
 <div class="tabs">
     <div class="tabs" id="tab1">
         <a href="#" alt="Home">
             Home
         </a>
      </div>
      <div class="tabs" id="tab2">
          <a href="#" alt="About">
              About
          </a>
      </div>
</div>

Answer 1

There are two general approaches to putting blocks left to right:

1. Make them inline; or
2. Use floats.

(1) would be:

div.main, div.tabs { display: inline; }

(2) would be:

div.main, div.tabs { float: left; }

If you do (2) put the divs in a container and add:

div.container { overflow: hidden; }

Each method has particular merits. Most notably inline elements can't have margin attributes applied to them. This is just one of the several constraints on inline vs block layout in HTML.