CSS에서 두 divs를 나란히 배치하는 방법은 무엇입니까?

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에 두 div (.main 및 .navbar2)를 함께 넣을 수 있습니까? main과 navbar div를 컨테이너에 나란히 놓고 싶습니다. 나는 navbar를 고정시킬 것이므로 아래로 스크롤하면 그 위치에 머무르게 될 것입니다. 나중에 웹 사이트 오른쪽에 3 번째 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; 
    } 

([어떻게 옆에 두 개의 사업부 박스 측면을 넣을]의