Align Two Divs Horizontally (one On Extreme Left And The Other On Extreme Right Of Container)
Answer :
display:inline-block
will not create afloat
issue so there is no need to add clearfix- you can also use
overflow:hidden
instead ofdisplay: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; }
Comments
Post a Comment