how to put two divs side by side in css? - html

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