How to make 3 divs side by side [duplicate] - html

Question

This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 6 years ago.
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 1

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>

Answer 2

this is what your code will be
.container {
border: 1px solid;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
background-color:red;
}
#div3 {
float: left;
background-color:green;
}
#div2 {
float: left;
background-color:yellow;
}
and
<div class="container">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>

Answer 3

Kindly check below CSS see if this is what you want:
.container {
float: left;
width: 300px;
border: 1px solid;
}
#div1 {
float: left;
width: 100px;
background-color: red;
}
#div2 {
float: left;
width: 100px;
background-color: green;
}
#div3 {
float: left;
width: 100px;
background-color: blue;
}
<div class="container">
<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div>
<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat.</div>
</div>

Answer 4

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

Answer 5

Don't use float and inline-block together. This will work:
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
.container {
width:100%;
}
#div1, #div2, #div3 {
height: 50px;
background: red;
display: inline-block;
width:33.33%;
margin-right:-4px;
}
If you want to style the divs individually then target them individually