Align two divs horizontally (one on extreme left and the other on extreme right of container)

Question

I'm working on a game website and want to place two divs inside a 'header' div such that they are horizontally aligned and to the left and right of this container div. See below for an example:

Oli                                                                             Matt

Here is my attempt. What is my error?

HTML:

<div class="header">
     <div class="playerOne">
     Oli
     </div>
     <div class="playerTwo">
     Matt
     </div>
</div>

CSS:

.header{
  display: inline-block;
}
.playerOne{
    margin-left: 0;
 }

.playerTwo{
  margin-right: 0;
}

Vitorino fernandes · Accepted Answer · 2019-09-06T04:57:15.263

29

display:inline-block will not create a float issue so there is no need to add clearfix
you can also use overflow:hidden instead of display:inline-block

.header {
  display: inline-block; 
  width: 100%;
  border: 1px solid red;
}
.playerOne {
  float: right;
}
.playerTwo {
  float: left;
}

<div class="header">
  <div class="playerOne">
    Oli
  </div>
  <div class="playerTwo">
    Matt
  </div>
</div>

edited Sep 06 '19 at 04:57

answered Apr 11 '15 at 16:38

Vitorino fernandes

15,794
3
20
39

2

This doesn't work – L H Jun 11 '20 at 01:50
1

make div display as inline-block works. – Daisy Apr 27 '21 at 05:10

score 18 · Answer 2 · answered Oct 08 '18 at 09:51

18

make it simple with flex

.wrapper{ display: flex; justify-content: space-between }

<div class="wrapper"><span>1</span><span>2</span></div>

answered Oct 08 '18 at 09:51

thiru murugan

189
1
4

2

http://jsfiddle.net/x17skhap/ – thiru murugan Oct 08 '18 at 09:56
1

Such a perfect solution. I was struggling to get it done and this solution worked! – Arun Ramachandran Jul 05 '20 at 22:38
Simple and great – vikingsteve Dec 14 '20 at 20:45
Such simple and elegant solution. Thanks Thiru! – Xonshiz Sep 28 '22 at 13:23

score 4 · Answer 3 · answered Apr 11 '15 at 16:38

4

The problem is that you are not targeting the proper inline-block element. :)

.header > div{
  display: inline-block;
}
.playerOne{
  float:right;
}

answered Apr 11 '15 at 16:38

Stanimir Yakimov

864
3
14
31

score 2 · Answer 4 · answered Apr 11 '15 at 16:37

2

Maybe using floats?

.playerOne{
    float: left
 }

.playerTwo{
  float: right
}

http://jsfiddle.net/dfLa5nmL/

answered Apr 11 '15 at 16:37

jpedroribeiro

622
3
11

Align two divs horizontally (one on extreme left and the other on extreme right of container)

4 Answers4