How to place two parent divs next to eachother?

Question

I want to place id 1 and id 2 next to eachother and the <b> in both of the divs above the input element.

<div>
  <div id="1 " style = "float:left; clear:both">
    <b style ="color: #444444" >Date</b>
    <input class="duedatetextbox" type="text" placeholder="Enter date"                tabindex="101">                        
  </div>
  <div id="2" style = "float:left; clear:both;padding-left:80px;">
    <b style ="color: #444444" >Time</b>
    <input class="duedatetextbox" type="text" placeholder="Enter time"                tabindex="102">
  </div>  
</div>

Thank you in advance!

Possible duplicate of [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) — Temani Afif, Jan 17 '18 at 11:01
https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display — Temani Afif, Jan 17 '18 at 11:02
https://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css — Temani Afif, Jan 17 '18 at 11:02
https://stackoverflow.com/questions/3619233/div-side-by-side-without-float — Temani Afif, Jan 17 '18 at 11:03
https://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side — Temani Afif, Jan 17 '18 at 11:03
and more and more question dealing with the same thing ... so it's good to do a small research before posting question — Temani Afif, Jan 17 '18 at 11:08

score 0 · Answer 1 · answered Jan 17 '18 at 11:01

Try below

 <div >
    <div id="1 " style = "float:left;">
      <b style ="color: #444444" >Date</b><br>
         <input class="duedatetextbox" type="text" placeholder="Enter date" tabindex="101">                        
   </div>
   <div id="2" style = "float:left;padding-left:80px;">
      <b style ="color: #444444" >Time</b><br>
         <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
    </div>  
  </div>

score 0 · Accepted Answer · answered Jan 17 '18 at 11:06

Have 50% width for both of the div's to make them spread through the width and make the b and input tags to display:block to make them one by one.

div.ids {
  width: 50%;
}

div.ids b {
  display: block;
  padding: 10px;
}

div.ids input {
  display: block;
  padding: 10px;
  background: whitesmoke;
  border: solid 1px grey;
  border-radius: 3px;
}

<div>
  <div class="ids" id="1" style="float:left; clear:both">
    <b style="color: #444444">Date</b>
    <input class="duedatetextbox" type="text" placeholder="Enter date" tabindex="101">
  </div>
  <div class="ids" id="2" style="float:left;">
    <b style="color: #444444">Time</b>
    <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
  </div>
</div>

score 0 · Answer 3 · answered Jan 17 '18 at 11:11

Add display:flex and width to main div

<div style="width:400px; display: inline-flex;">
  <div id="1 " style = "float:left; clear:both; width:50%;">
    <b style ="color: #444444" >Date</b>
    <input class="duedatetextbox" type="text" placeholder="Enter date"                tabindex="101">                        
</div>
<div id="2" style = "float:left; clear:both;padding-left:10px; width:50%;">
  <b style ="color: #444444" >Time</b>
  <input class="duedatetextbox" type="text" placeholder="Enter time"                tabindex="102">
</div>  
</div>

How to place two parent divs next to eachother?

3 Answers3