如何把兩個div並排放在css中？

Question

.navbar { 
    overflow: hidden; 
    background-color: antiquewhite; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

.navbar a { 
    float: right; 
    display: block; 
    color: Black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 22px; 

} 
.container { 
    width: 80%; 
    background: aqua; 
    margin: auto; 
    padding: 10px; 
} 

.main { 
    padding: 16px; 
    margin-top: 30px; 
    width:1000px; 
    margin-left:15px; 
} 

#navbarItem { 
    list-style-type: none; 
    margin: 0; 
    padding:0; 
} 

li a:hover { 
    background-color: #b6ff00; 
    color: white; 
} 


.main{ 
    padding-top:100px; 
    padding-left:100px; 
    padding-right:100px; 
    border: 1px solid green; 
} 

.navbar2{ 
    width:15%; 
    float:left; 
    border: 2px solid red; 
} 

如何將兩個div（.main和.navbar2）放在一起放在容器div中？我想將主要和導航欄並排放在容器中。我將修正導航欄，以便在向下滾動時保持其位置。稍後我可能會在網站右側添加第三個div。

Answer 1

HTML：

<div id="wrapper"> 
     <div id="leftcolumn"> 
      Left 
     </div> 
     <div id="rightcolumn"> 
      Right 
     </div> 
    </div> 

CSS：

body { 
     background-color: #444; 
     margin: 0; 
    }  
    #wrapper { 
     width: 1005px; 
     margin: 0 auto; 
    } 
    #leftcolumn, #rightcolumn { 
     border: 1px solid white; 
     float: left; 
     min-height: 450px; 
     color: white; 
    } 
    #leftcolumn { 
     width: 250px; 
     background-color: #111; 
    } 
    #rightcolumn { 
     width: 750px; 
     background-color: #777; 
    }