Html 将一个div定位到另一个div的右侧

我有下面的html和css。但我搞不懂的是如何让tabs div位于main 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>

一些主要内容

将块从左向右放置有两种常用方法：

使它们内联；或

使用浮动

（1） 将是：

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

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

（2） 将是：

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

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

如果您这样做（2），请将div放入容器中并添加：

div.container { overflow: hidden; }

---

每种方法都有其独特的优点。最值得注意的是，

inline

元素不能应用

margin

属性。这只是HTML中内联与块布局的几个限制之一。

ID应该是唯一的——将#tab改为.tab以防止出现问题。此外，锚点没有alt属性。试试标题吧，我还是没法用。它根本不显示容器或其内容。我粘贴了所有内容，因为问题可能超出了我发布的内容：