html - Centering and floating within the same container -

i have 1 container having content centered in want put on left , having trouble figuring out how this.

is way absolute positioning? here code have been playing around show ads example:

html:

<div class="container">   <p class="one">left</p>   <p style="clear: both;"></p>   <div class="center">center</div> </div> 

css:

.container {   background-color: gray;   text-align: center; }  .container .one {   float: left;   background-color: aqua; }  .clearfix:after, .clearfix:before {   display: table;   content: " ";   clear: both; }  .container .center {   display: inline-block;   background-color: green; } 

codepen:

http://codepen.io/anon/pen/nqebnp

try applying display:inline-block , float:left width of both div.

.container {    background-color: gray;    text-align: center;    overflow: auto;  }  .container .one {    display: inline-block;    float: left;    width: 33%;    background-color: aqua;  }  .container .center {    display: inline-block;    float: left;    width: 33%;    background-color: green;  }

<div class="container">    <div class="one">left</div>    <div class="center">center</div>  </div>