Align two inline-blocks left and right on same line

by

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/

More Related Contents:

  1. How to draw this chart in html and CSS? [closed]
  2. Change a HTML5 input’s placeholder color with CSS
  3. Canvas is stretched when using CSS but normal with “width” / “height” properties
  4. Remove padding from columns in Bootstrap 3
  5. Is there a way to word-wrap long words in a div?
  6. Center a ‘div’ vertically in a % height ‘div’
  7. Single huge .css file vs. multiple smaller specific .css files? [closed]
  8. xHTML/CSS: How to make inner div get 100% width minus another div width
  9. How to display a reverse-ordered list in HTML?
  10. CSS div element – how to show horizontal scroll bars only?
  11. How can I remove space (margin) above HTML header?
  12. How does object-fit work with canvas element?
  13. How to make a element expand or contract to its parent container?
  14. Webkit CSS to control the box around the color in an input[type=color]?
  15. How to center absolute div horizontally using CSS?
  16. HTML not loading CSS file
  17. element not working in Internet Explorer 11
  18. How to link a CSS file from HTML file?
  19. How can I send an inner to the bottom of its parent ?
  20. SPAN vs DIV (inline-block)
  21. how to rotate text left 90 degree and cell size is adjusted according to text in html
  22. Set div height equal to screen size
  23. Align vertically using CSS 3
  24. Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
  25. There is a 4px gap below canvas/video/audio elements in HTML5
  26. Style lower and upper fill in HTML5 range input
  27. How can I align 3 divs side by side?
  28. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  29. 100% DIV width is not really 100%
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment