Позиционирование одного div справа от другого

Question

У меня есть следующие HTML и CSS. Но то, что я не могу понять, - это как расположить вкладки div справа от основного div. Так что они торчат как закладки.

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

И 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

Существует два основных подхода к размещению блоков слева направо:

1. Сделать их встроенными; или
2. Используйте поплавки.

(1) будет:

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

(2) будет:

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

Если вы делаете (2), поместите div в контейнер и добавьте:

div.container { overflow: hidden; }

У каждого метода есть свои достоинства. В частности, элементы inline не могут иметь к ним атрибуты margin. Это всего лишь одно из нескольких ограничений для встроенного и блочного макета в HTML.