html - How to place to divs with drop down lists in them next to each other? -

<div style="width: 100%; overflow: hidden;"> <div style="margin-left: 100px; width: 600px; float: left;"> <div class="description">  <h2 style="color:blue">select appropriate version</h2> </div> <select>  <option value="" disabled selected>select version</option>  <option value="" disabled selected>select feature</option>  <option value="a">     </option>  <option value="b"> b </option>  <option value="c"> c</option> </select>  <div style=" margin-left: 350px; width: 600px; float: left;"> <div class="description"> <h2 style="color:blue">select appropriate category</h2> </div> <select>  <option value="" disabled selected>select feature</option>  <option value="" disabled selected>select category</option>  <option value="a">     </option>  <option value="b"> b </option>  <option value="c"> c</option> </select>  <div style="margin-left: 620px;  width: 600px; float: left;"> <div class="description"> <br> <h2 style="color:blue">select feature</h2> </div> <select>  <option value="" disabled selected>select feature</option>  <option value="" disabled selected>select category</option>  <option value="a">     </option>  <option value="b"> b </option>  <option value="c"> c</option> </select> </div> </div> 

i want 3 divs drop down lists next each other horizontally. have tried using float, inline , inline block. how can done in html.

<div style="float:left"> dropdown1 </div> <div style="float:left"> dropdown2 </div> <div style="float:left"> dropdown3 </div> 

this work.

problem in code on width. better give width % instead of px.