Positionierung eines div rechts von einem anderen

Question

Ich habe die folgenden HTML und CSS. Aber was ich nicht herausfinden kann ist, wie man die Tabs div auf der rechten Seite des Hauptdivs hat. Damit sie wie Lesezeichen richtig herausragen.

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

Und die 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

Es gibt zwei allgemeine Ansätze zu setzen Blöcke links nach rechts:

1. Machen sie inline; oder
2. Verwenden Sie Schwimmer.

(1) wäre:

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

(2) wäre:

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

Wenn Sie die divs in einen Behälter (2) haben und fügen:

div.container { overflow: hidden; } 

Jede Methode hat besondere Vorteile. Vor allem inline Elemente können nicht margin Attribute auf sie angewendet haben. Dies ist nur eine der Einschränkungen für das Inline-Layout und das Block-Layout in HTML.