Geeky Geeky - 17 days ago 7
CSS Question

How to make 3 divs side by side

How can i make 3 divs side by side. where div1 would be extreme left ,div3 would be extreme right and div2 in the middle.

I know this can be done by display:flex and justify-content:space-between ,but i am looking for an approach without flex.

Here is my approach ,but could not achieve it successfully.

I tried to make all div's display:inline-block and float:left and float:right to the two extreme divs and for the middle one i tried margin:auto,but looks like it is not respecting it

Please help



.container {
border: 1px solid;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
}
#div3 {
float: right;
}
#div2 {
margin: auto;
}

<div class="container">

<div id="div1"></div>
<div id="div2">he</div>

<div id="div3"></div>
</div>




Answer

try this one. position: absolute;

.container {
  border: 1px solid;
  position: relative;
  overflow: hidden;
  
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
  
}
#div1 {
 float: left;
}
#div3 {
 float: right;
}
#div2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
<div class="container">

  <div id="div1"></div>
  <div id="div2">he</div>

  <div id="div3"></div>
</div>