Positioning one div to the right of another

Question

Hi

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="tab">
             <a href="#" alt="Home">
                Home
             </a>
          </div>
          <div class="tabs" id="tab">
             <a href="#" alt="About">
                About
             </a>
          </div>

Answer 1

You have to float things to the right before the content they're supposed to be positioned at the right of. Otherwise the division will break it down to the line below the content as it's normal functionality and then float it to the right at that position. Put your tabs division before your main division.

Edit: Depending on your page setup, you might also have to set a margin-right on your main division to prevent the the division from appearing to expand behind the one floated to the right, although the text will not.

Answer 2

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.