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

Question

I am trying to align two inline elements, one to the left and one to the right. I'd like to accomplish this without using floats.

In my case, I have a h1, with a span and a link. I'd like the span to align to the left and the link to align to the right.

http://jsfiddle.net/Lkfacta3/

h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}

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

This is the desired result:

desired-result

A bit of history: The birth to this question is because the behavior of floats is wild. Even with clears and enveloped DIV's the results of floats vary widely between browsers and turns an EZ css task into a nightmare trying to control weird and unexpected behaviors among browsers. Even with CSS v3.0, these unwanted behaviors prevailed; forcing me to avoid floats like a plague and favor alternatives. It is thanks to this search that I've found better and cleaner ways to CSS a page WITHOUT floats. Eliminating the need for clears and unecessary extra HTML elements. JUST BETTER! — Omar, Jul 25 '20 at 10:34

score 81 · Accepted Answer · answered Apr 11 '15 at 15:38

81

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>

answered Apr 11 '15 at 15:38

Oriol

274,082
63
437
513

this works but i get a weird margin above the h1, even after taking off margins – chovy Mar 09 '16 at 11:29
1

@chovy That is not related to flexbox. It might be the margin of `h1` or `body`. – Oriol Mar 09 '16 at 12:55
if i remove `display: flex` it goes away. I think it was my fixed width causing the issue though. – chovy Mar 11 '16 at 01:10
This is very good and working answer. Thank you! For my case I used 'div' instead of 'h1' and it is working fine. I found more info about the css flex here - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout – Combine Oct 03 '18 at 10:08
Nice solution! Works like a charm – Pianoman Jan 13 '19 at 18:56

Stickers · Answer 2 · 2016-04-09T12:48:09.880

You can use CSS display:table + display:table-cell.

h1 {
  display: table;
  width: 100%;
  margin: 0;
}
h1>span {
  text-align: left;
  display: table-cell;
}
h1>a {
  text-align: right;
  display: table-cell;
}

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

Or, do it with display:inline-block.

h1 {
  font-size: 0; /* remove whitespace */
}
h1>span,
h1>a {
  font-size: 32px;
  display: inline-block;
  width: 50%;
}
h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}

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

Note, either way above will make the <a> clickable area larger, wrap it into another <span> if you need to correct that.

The `display: inline-block;` solution worked for me. Thanks. — Ryan Walker, Sep 22 '18 at 00:15

score 1 · Answer 3 · answered Apr 11 '15 at 00:22

You could try CSS tables, and take some precaution for dealing with the link if you want the active area to extend only over the text.

Depending on how you want this to work in a flexible design, floats might be a feasible option.

h1 {
  display: table;
  width: 100%;
}
h1 span, h1 a {
  display: table-cell;
}
h1 span {
  text-align: left;
}
h1 a {
  text-align: right;
  border: 1px dotted blue;
  width: 1%;
  white-space: nowrap;
}

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

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

3 Answers3

Linked

Related