how to put two divs side by side in 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;
}

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.

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