Posicionando un div a la derecha de otro

Question

Tengo los siguientes html y css. Pero lo que no puedo entender es cómo tener las pestañas div a la derecha de la div principal. Para que sobresalgan a la derecha como marcadores.

.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;} 

Y el 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

Hay dos enfoques generales para poner bloques de izquierda a derecha:

1. Hacerlos en línea; o
2. Use flotadores.

(1) sería:

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

(2) sería:

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

Si (2) poner los divs en un recipiente y añadir:

div.container { overflow: hidden; } 

Cada método tiene méritos particulares. Lo más notable es que los elementos inline no pueden tener atributos margin aplicados. Esta es solo una de las varias restricciones en el diseño en línea vs bloque en HTML.