title: how to put two divs side by side in css?
body: <pre><code>.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;
  }
  </code></pre>
  
  <p>How can I put two divs (.main and .navbar2) together in container div ? I want to put main and navbar div side by side in container. I will make the navbar fixed, so that as I scroll down it will stay in its position. Later I might add 3rd div to the right of website.                                                                                                  </p>