How to make 3 divs side by side

Question

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>

score 5 · Accepted Answer · answered Nov 22 '16 at 05:00

5

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>

answered Nov 22 '16 at 05:00

Ron.Basco

2,348
16
25

This is good but can you explain why margin:auto just does not work why it has to be positioned absolute – Geeky Nov 22 '16 at 05:16
`margin: 0 auto` works only on block level elements. As long as your element has a width, `position: absolute; left:0; right: 0; margin: auto;` will center it horizontally or else it will stretch from left to right. – Ron.Basco Nov 22 '16 at 05:21
margin:auto does not work with an inline-block – Chibiao.Wang Nov 22 '16 at 05:21
Thanks for the explanation – Geeky Nov 22 '16 at 05:26

score 2 · Answer 2 · answered Nov 22 '16 at 05:02

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>

Chibiao.Wang · Answer 3 · 2016-11-22T05:07:04.357

1

.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>

edited Nov 22 '16 at 05:07

answered Nov 22 '16 at 04:58

Chibiao.Wang

396
2
5

you are rearranging the divs,i want div1 to be floated:left and div3 to be floated:right – Geeky Nov 22 '16 at 04:59
it's easy to solve this problem if reordering is allowed. – Chibiao.Wang Nov 22 '16 at 05:01
I've edited the answer. If the order can't be changed, I have to set the div3 absolute. – Chibiao.Wang Nov 22 '16 at 05:08
Thanks for the suggestion – Geeky Nov 22 '16 at 06:06

score 1 · Answer 4 · answered Nov 22 '16 at 05:02

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>

Claire · Answer 5 · 2016-11-22T05:06:49.183

0

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

edited Nov 22 '16 at 05:06

answered Nov 22 '16 at 04:56

Claire

3,146
6
22
37

I want all the three divs to be on the same line – Geeky Nov 22 '16 at 05:00
edited to arrange on same line – Claire Nov 22 '16 at 05:07

How to make 3 divs side by side

5 Answers5