CODEWITHSUNDEEP
csshtml
Shia Supertramp
Shia Supertramp

Reputation: 1

How do I put 2 floating <div> elements center of the container <div> next to each other?

I have 2 div elements "date1' and "date2" in parent div dates. I can put them next to each other but both align either left or right. But i want them at center next to each other like, [ o o ] not [oo ]

#date1 {
float: left;
width: 32%;

text-align: center;

padding: 2px;


}

#date2 {
float: left;
    width: 32%;

text-align: center;
padding: 2px;
}

Upvotes: 0

Views: 23

Answers (3)

AG_
AG_

Reputation: 2699

use 

display:inline-block

instead of 

'float:left'.

try this fiddle 

https://jsfiddle.net/92q5xr3p/

Upvotes: 0

Mohit Yadav
Mohit Yadav

Reputation: 471

try it using display:inline-block;

<div class="container-fluid">
  <div class="row">
    <div id="date1">
    </div>
    <div id="date2">
    </div>
  </div>
</div>

css would be

.row{
display:inline-block;
width:100%;
//your other css
}
.date1 .date2{
vertical-align:top;
//your other css
}

Upvotes: 0

ab29007
ab29007

Reputation: 7766

Try using flex:

#date1 {
background-color:green;
float: left;
width: 32%;
  height:200px;
text-align: center;
padding: 2px;
}
#date2 {
float: left;
width: 32%;
  height:200px;
text-align: center;
padding: 2px;
  background-color:blue;
}
.row{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
}
<div class="container-fluid">
  <div class="row">
    <div id="date1">
    </div>
    <div id="date2">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions