How to make two vertical columns in html - html

Question

Is there a way to have two divs in one row or have a two columns of divs. It appears as one div under the other instead of a div next to a div.
CSS
#tacoh {
margin: 200px 20% 40px 0;
float:right;
}
#hamburgerh {
margin: 200px 40px 0 20% ;
float:left;
}
HTML
<div id="hamburgerh" style="width:300px;height:350px;"></div>
<div id="tacoh" style="width:300px;height:350px;"></div>

Answer 1

You can either set a float left for both divs :
#tacoh {
margin: 200px 20% 40px 0;
float:left;
}
#hamburgerh {
margin: 200px 40px 0 20% ;
float:left;
}
or wrap them into a container as Marius Balaj suggested :
.container {
width:100%;
margin: 200px 0 40px;
}
#tacoh {
margin: 200px 20% 40px 0;
float:left;
}
#hamburgerh {
margin: 200px 40px 0 20% ;
float:left;
}
with the following html :
<div class="container">
<div id="hamburgerh" style="width:300px;height:350px;"></div>
<div id="tacoh" style="width:300px;height:350px;"></div>
</div>
Also since your style is the same for both divs, you could also create a class for them like below :
.w_300_h_350{
width:300px;
height:350px;
}
and apply it to you html like this :
<div id="hamburgerh" class="w_300h_350"></div>
<div id="tacoh" class="w_300h_350"></div>

Answer 2

Wrapit inside a container.
http://jsbin.com/qediqoxiwo/edit?css,output
.container {
width:100%;
margin: 200px 0 40px;
}
.col {
float:left;
width: 300px;
height: 350px;
background:blue;
}
.col:last-child {
float:right;
background: red;
}