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; } 

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable