Как сделать два вертикальных столбца в html

Question

Есть ли способ иметь два div в одной строке или иметь два столбца div. Он отображается как один div под другим, а не div рядом с 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

Вы можете установить поплавок влево для обоих дивы:

#tacoh { 
margin: 200px 20% 40px 0; 
float:left; 
} 

#hamburgerh { 
margin: 200px 40px 0 20% ; 
float:left; 
} 

или обернуть их в контейнер, как предложил Мариус Балай:

.container { 
    width:100%; 
    margin: 200px 0 40px; 
} 

#tacoh { 
margin: 200px 20% 40px 0; 
float:left; 
} 

#hamburgerh { 
margin: 200px 40px 0 20% ; 
float:left; 
} 

с следующие html:

<div class="container"> 
    <div id="hamburgerh" style="width:300px;height:350px;"></div> 
    <div id="tacoh" style="width:300px;height:350px;"></div> 
</div> 

Кроме того, поскольку ваш стиль является одинаковым для обоих дивы, вы можете также создать класс для них, как показано ниже:

.w_300_h_350{ 
    width:300px; 
    height:350px; 
} 

и применить его к вам HTML, как это:

<div id="hamburgerh" class="w_300h_350"></div> 
<div id="tacoh" class="w_300h_350"></div> 

Answer 2

Wrapit внутри контейнера.

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