Align two inline-blocks left and right on same line

inline-block; float: right
align text left, center right same line html
css align: right
div align: left and right same line
flex; align right
css align two elements left and right
align icon right css
div left and right align

How can I align two inline-blocks so that one is left and the other is right on the same line? Why is this so hard? Is there something like LaTeX's \hfill that can consume the space between them to achieve this?

I don't want to use floats because with inline-blocks I can line up the baselines. And when the window is too small for both of them, with inline-blocks I can just change the text-align to center and they will be centered one atop another. Relative(parent) + Absolute(element) positioning has the same problems as floats do.

The HTML5:

<header>
    <h1>Title</h1>
    <nav>
        <a>A Link</a>
        <a>Another Link</a>
        <a>A Third Link</a>
    </nav>
</header>

The css:

header {
    //text-align: center; // will set in js when the nav overflows (i think)
}

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

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

Thery're right next to each other, but I want the nav on the right.

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/

Left & right aligned divs on the same line without floats, display:table for the parent container and display:table-cell for the two sides. Or inline-blocks:- .sides { box-sizing: border-box; width: 50%; /* or  Align text on both left and right sides on same line of a Word document. To finish this task quickly and easily, please do with the following step by step: 1. In the Word file that you want to insert the text and align to left and right, and then, click Home, in the Paragraph group, click the Paragraph Settings icon, see screenshot: 2.

Taking advantage of @skip405's answer, I've made a Sass mixin for it:

@mixin inline-block-lr($container,$left,$right){
    #{$container}{        
        text-align: justify; 

        &:after{
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
            font-size:0;
            line-height:0;
        }
    }

    #{$left} {
        display: inline-block;
        vertical-align: middle; 
    }

    #{$right} {
        display: inline-block;
        vertical-align: middle; 
    }
}

It accepts 3 parameters. The container, the left and the right element. For example, to fit the question, you could use it like this:

@include inline-block-lr('header', 'h1', 'nav');

How To Align Things In CSS, It turns out that line-height and indeed the size of text is pretty See the Pen inline-block and vertical-align by Rachel Andrew. The Inline direction is the direction in which sentences run (so for English that is left to right horizontally). I have applied work in exactly the same way on the block axis in both  Left Align and Right Align Text on the Same Line. It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right.

If you don't want to use floats, you're going to have to wrap your nav:

<header>
<h1>Title</h1>
<div id="navWrap">
<nav>
    <a>A Link</a>
    <a>Another Link</a>
    <a>A Third Link</a>
</nav>
</div>
</header>

...and add some more specific css:

header {
//text-align: center; // will set in js when the nav overflows (i think)
width:960px;/*Change as needed*/
height:75px;/*Change as needed*/
}

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

#navWrap{
position:absolute;
top:50px; /*Change as needed*/
right:0;
}

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

You may need to do a little more, but that's a start.

Why You Should Use Inline-Block when Positioning Elements , Aligning elements using inline-block is incredibly simple; all you have to do is use text-align on the parent element. This gives you the ability to align elements centrally, to the left, or to the right. Not only that, but you don't need to define a width to center an element. I need to left, center, & right align text on the same line. I have the following text: Left Align: 1/10; Center: 02:27; Right Align: 100%; I wrote the following code which works for left and right aligning text but does not work correctly for the center text.

If you're already using JavaScript to center stuff when the screen is too small (as per your comment for your header), why not just undo floats/margins with JavaScript while you're at it and use floats and margins normally.

You could even use CSS media queries to reduce the amount JavaScript you're using.

Left Align and Right Align Text on the Same Line, It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a  I don't want to use floats because with inline-blocks I can line up the baselines. And when the window is too small for both of them, with inline-blocks I can just change the text-align to center and they will be centered one atop another. Relative(parent) + Absolute(element) positioning has the same problems as floats do. The HTML5:

I think one possible solution to this is to use display: table:

.header {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

.header > * {
  display: table-cell;
}

.header > *:last-child {
  text-align: right;  
}

h1 {
  font-size: 32px;
}

nav {
  vertical-align: baseline;
}

JSFiddle: http://jsfiddle.net/yxxrnn7j/1/

How to use inline-block for layout • iamsteve, Find out how to get rid of the inline-block space and align left, right or to the centre, with ease. With this, we can change the how the layout is displayed when items aren't the same height. that have a bunch of content in and you want them in two columns, you can add a width. .grid.grid-with-gutter.row #2 click on the tabs button in bottom right of the paragraph dialog #3 the end result will be the right align tab shown at #3 #4 enter a value for the "right align" tab, I used 6.94 #5 click on "right align" #5a (no number on picture) click on Set button to save this tab . This setting is saved in the current line paragraph mark.

CSS display properties: block, inline, and inline-block, However, CSS has two different types of boxes — block and inline. on a new line, and fills up the horizontal space left and right on the web page. Inline elements don't start on a new line, they appear on the same line as  Alighting left and right on the same line of text in Microsoft Word is known as justifying. Align left and right on the same line of text in Microsoft Word with help from an experienced technology

How to Make Inline-Block Elements Add Up to 100% Width – UX , If you've ever tried to create two inline-block divs with a 50% width, then you know what I mean. display: inline-block; height: 150px; padding: 50px; text-​align: center; Two divs inline block at 50% width that do line up .green { margin-right: 1em; } div { width: calc(50% - .5em); } One thing to point out:. I'd like two divs within a parent div to be positioned on either side within the parent on the same line, thus : [LEFT <----- Space -----> RIGHT] Is this easily achievable? Many thanks, WS Themes

Align inline-blocks with vertical-align, By default it's not possible to vertically center inline-blocks with vertical-align (red box). with some lengthy text to show that it also works with multiple lines.</div>.

Comments
  • AFAIK the only way to solve this is to use floats or absolute positioning. You can achieve the same baseline position using margin-top on the nav.
  • Just use margin-top and floats. It's not possible to do this without that or absolute positioning.
  • Use css media queries to change the css depending on the size of the viewport. You can use both position: absolute and inline-block
  • Is there any way to stop it from making the banner taller though? I realize how this is working, so I would assume there isn't.
  • If you're generating your content with javascript, note that this solution only works if there is whitespace between the elements. You will need to insert a text node between the left/right elements or they will both stick to the left.
  • Would you mind to paste your code in here, as well? Links to external places have a habit of dying at some point, and if that happens, this otherwise useful answer will suddenly become useless.
  • @ValerioColtrè I agree that the empty space is the most (and possibly, only!) annoying thing about this approach. Explicitly managing your font-size is rather undesirable. I propose a different solution. Note that the .header:after decorator adds one line of height equal to font-size. Luckily we know how much that is. It is exactly 1em! So, negative margins to the rescue! This fiddle shows how.
  • @skip405 Note: setting the line height to 0 on the wrapper element (header) and fixing the vertical-alignment of it's pseudo elem (vertical-align: top, say) can fix the extra space problem. We have to, of course, re-set the line-height on the parent elements, but it can be easier in many cases. jsfiddle.net/bencergazda/3gL8153n/7
  • I guess I wasn't really thinking about that yet, it just seemed like it would be easier this way. But apparently not. Any hints as to how I would hook into the nav jumping to the next line from javascript?
  • Ahh, I can use media queries for this! I thought those only were used on startup, not on resize. Thanks.
  • "I don't want to use floats"
  • @powerbuoy funny he selected the solution with floats at the end, right?
  • @Italy: Only because I thought it was the only possible way—I have changed my accepted answer.
  • For a float no wrap cannot be used.