html - Fix alignment in css -

i working on project college using bootstrap css , stuck fixing alignment issues. wanted achieve align logo left(acquiring 35% of width) , aligning social plugin , sign & sign in button right(acquiring leftover space i.e. 65%).

the issue facing right aligned vertically! i've coded far mentioned below. appreciate if fixes bug in code rather coming new one.

here html:

<div class="container">     <div id="topbar">         <div class="topleft">logo</div>         <div class="topright">             <div class="socialplugin">f t g</div>             <div class="signupin">sign up/in</div>         </div>     </div> </div> 

here css:

#topbar {     width: 100%; } #topbar .topleft {     width: 35%; } #topbar .topright {     width: 65%; } #topbar .topright .socialplugin {     float: left; } #topbar. toprighht .signupin {     float: right; } 

demo

thank you

leaving aside fact bootstrap not being used of want can solved correctly applying float , clearing floats necessary.

#topbar {    width: 100%;    overflow: hidden;    /* quick clearfix */  }  #topbar .topleft {    width: 35%;    float: left;    background: lightblue;  }  #topbar .topright {    width: 65%;    background: #bada55;    float: left;  }  #topbar .topright .socialplugin {    float: left;    width:50%;  }  #topbar. toprighht .signupin {    float: right;      width:50%;    }

<div class="container">    <div id="topbar">      <div class="topleft">logo</div>      <div class="topright">        <div class="socialplugin">f t g</div>        <div class="signupin">sign up/in</div>      </div>    </div>  </div>