Align Two Inline-Blocks Left and Right on Same Line

Align two inline-blocks left and right on same line

Edit: 3 years has passed since I answered this question and I guess a more modern solution is needed, although the current one does the thing :)

1.Flexbox

It's by far the shortest and most flexible. Apply display: flex; to the parent container and adjust the placement of its children by justify-content: space-between; like this:

.header {
    display: flex;
    justify-content: space-between;
}

Can be seen online here - http://jsfiddle.net/skip405/NfeVh/1073/

Note however that flexbox support is IE10 and newer. If you need to support IE 9 or older, use the following solution:

2.You can use the text-align: justify technique here.

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

The working example can be seen here: http://jsfiddle.net/skip405/NfeVh/4/. This code works from IE7 and above

If inline-block elements in HTML are not separated with space, this solution won't work - see example http://jsfiddle.net/NfeVh/1408/ . This might be a case when you insert content with Javascript.

If we don't care about IE7 simply omit the star-hack properties. The working example using your markup is here - http://jsfiddle.net/skip405/NfeVh/5/. I just added the header:after part and justified the content.

In order to solve the issue of the extra space that is inserted with the after pseudo-element one can do a trick of setting the font-size to 0 for the parent element and resetting it back to say 14px for the child elements. The working example of this trick can be seen here: http://jsfiddle.net/skip405/NfeVh/326/

CSS: align two element, to the left and right in the same line WHITHOUT floats

You can use some flexbox magic:

h1 {  display: flex;  justify-content: space-between;}

<h1>  <span>Align me left</span>  <a href="">align me right</a></h1>

.span6{
    float: left;
    width: 50%;
}
nav{
    float: right;
    text-align: right;
    ...
}

<div class='container'>
  <div class="align-left">left</div>
  <div class="align-right">right</div>
</div>

.container{ width:100%; }    
.align-left{ float: left;width:50%; }
.align-right{ float: right;width:50%; }

.outer {  display: block;  clear: right;/*clear float right*/}.lbubble,.rbubble {  position: relative;  padding: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  -webkit-box-shadow: 2px 2px 10px 0px #616161;  box-shadow: 2px 2px 7px 0px #616161;  display: inline-block;  margin-bottom: 8px;}.lbubble {  background: lightblue;}.rbubble {  background: lightgreen;  float: right;/*add float right*/}.lbubble:after {  content: "";  position: absolute;  top: 5px;  left: -8px;  border-style: solid;  border-width: 10px 14px 10px 0;  border-color: transparent lightblue;  width: 0;  z-index: 1;}.rbubble:after {  content: "";  position: absolute;  top: 5px;  right: -8px;  border-style: solid;  border-width: 10px 0 10px 14px;  border-color: transparent lightgreen;  width: 0;  z-index: 1;}

<div class='outer'>  <div class="rbubble">Right Bubble with align right</div></div><div class='outer'>  <div class="lbubble">Left Bubble it should be on 2nd line with align left</div></div>