Align Two Divs Horizontally (one On Extreme Left And The Other On Extreme Right Of Container)
Answer : 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> make it simple with flex .wrapper{ display: flex; justify-content: space-between } <div class="wrapper"><span>1</span><span>2</span></div> The problem is that you are not targeting the proper inline-block element. :) .header > div{ display: inline-block; } .playerOne{ float:right; }