Vertically aligning floating divs in modern browsers (2014)

Question

I'd like to ask this question again as its previous incarnation was half a decade ago. We need not consider anything pre-IE9 for the purposes of this discussion:

I am trying to float two divs with different font-sizes. I can't find a way to align the text on the same baseline. Here is what I have been trying:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:left;">SMALL</div>
</div>

I am struggling with this currently and the best solution I've found is magic offsets from inspection, and that's hardly robust. Inline-block has its own issues I'd prefer to avoid.

Edit:

http://jsfiddle.net/crw4r/10/

As you can see, floats align at the top, not at the baseline.

What are the issues with `display: inline-block` you're referring to? — davidpauljunior, Jan 08 '14 at 03:22
Inline-block introduces invisible, additional spacing that has to be accounted for with font-size hacks. Certainly, if there is a consistent, cross-browser solution that uses inline-block, I'll take it, but preferably I'd be able to continue avoiding inline-block as a matter of taste. I've found clearfixes and floats to be sufficient and predictable up to this point. — M. Herold, Jan 08 '14 at 03:26
maybe this question might help you? http://stackoverflow.com/questions/12557897/how-to-vertically-middle-align-floating-elements-of-unknown-heights — Anthony Weber, Jan 08 '14 at 03:42

2pha · Answer 1 · 2014-01-08T03:39:17.523

1

Set the line-height to be the same on both.
http://jsfiddle.net/crw4r/6/

eg.

line-height: 42px;

or if this is not what you want...
you could use absolute positioning.
http://jsfiddle.net/crw4r/7/

or, you could set the line height on both and add margin to the top of the smaller one, so the sum of the line-height and top margin are the same on both text.
http://jsfiddle.net/crw4r/13/

edited Jan 08 '14 at 03:39

answered Jan 08 '14 at 03:26

2pha

9,798
2
29
43

1

Yes, unfortunately simply matching line-heights and adjusting vertical-alignment does not solve this problem. – M. Herold Jan 08 '14 at 03:30
The margin solution is actually not totally accurate and was in fact my first attempt at a solution. http://jsfiddle.net/crw4r/12/ – M. Herold Jan 08 '14 at 03:37
The margin one seems to work if you set the font size and line-height. I added another fiddle – 2pha Jan 08 '14 at 03:40
hmmm...I think the 2 other solutions are better than mine....but it would all depend on what is on the rest of the page I suppose. – 2pha Jan 08 '14 at 03:45
The margin-difference approach doesn't actually align baselines. Ironically, I may have got it working in a live solution. I can't explain why it works, given the fiddle shows it doesn't. – M. Herold Jan 08 '14 at 04:06

Olaf Dietsche · Answer 2 · 2014-01-08T03:47:54.493

1

With display: inline-block, the divs are automatically aligned on the baseline. To compensate for the float, you can use text-align

#left {
    display: inline-block;
    width: 50%;
    font-size: 40px;
    text-align: left;
}
#right {
    display: inline-block;
    width: 50%;
    text-align: right;
}

See JSFiddle

If you need to account for white space, use width: 49% for one of the divs

JSFiddle

edited Jan 08 '14 at 03:47

answered Jan 08 '14 at 03:36

Olaf Dietsche

72,253
8
102
198

@Jeremy See updated answer, I hope it is clearer now. – Olaf Dietsche Jan 08 '14 at 03:48
good edit. Also I think you're right here: `inline-block` does exactly what OP's asking for. Eliminating white-space between the blocks is easier than using another method to fudge the alignment. – Jeremy Jan 08 '14 at 03:55

score 1 · Accepted Answer · answered Jan 08 '14 at 03:40

1

You could use display: table-cell instead of floats?

#header {
  display: table;
  width: 100%;
}

#header div {
  display: table-cell;
}

#left {
  font-size: 40px;
}

#right {
  text-align: right;
}

Demo

answered Jan 08 '14 at 03:40

davidpauljunior

8,238
6
30
54

This is an interesting solution, I always forget about "display: table-cell;". I may attack this problem with your solution, reinforced by this article (http://www.onenaught.com/posts/201/use-css-displaytable-for-layout). – M. Herold Jan 08 '14 at 04:10
Cracking, happy to help! – davidpauljunior Jan 08 '14 at 04:34

score 0 · Answer 4 · answered Jan 08 '14 at 03:52

<div id="container">
    <div class="left"><span>Big</span></div>
    <div class="right"><span>Small</span></div>
</div>

#container{
    width:100%;
    margin:0px auto;
}

#container div{
    position:relative;
    height: 42px;
    width: 100px;
}
#container div span{
    position:absolute;
    bottom:0;
    right:0;
}
.left{
    float:left !important; font-size:40px;
}
.right{
    float:right !important;
}

Shyam · Answer 5 · 2014-01-08T04:48:34.727

-1

Try below css and html

CSS

.header {
    overflow: hidden;
    width: 200px;
    display:table;
}

.header > div{
    display:table-row;
}

.header > div > div{
    display:table-cell;
    vertical-align:baseline;
    width:50%;
}

.big {
    text-decoration: underline;
    font-size: 40px;
}
.small {
    text-decoration: underline;
    font-size: 12px;
}

HTML

<div class="header">
    <div>
        <div class="big">BIG</div>
        <div class="small">SMALL</div>
    </div>
</div>

edited Jan 08 '14 at 04:48

answered Jan 08 '14 at 03:58

Shyam

782
5
12

You've *middle*-aligned, here, not *baseline*-aligned. – Jeremy Jan 08 '14 at 04:03
You can change vertical-align property whatever you want. – Shyam Jan 08 '14 at 04:47
True, but in table-cells your choices are `top`, `middle`, and `bottom` ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)). So, you can't use `baseline`. There's a big difference between bottom and baseline with large font sizes. – Jeremy Jan 08 '14 at 04:57

Vertically aligning floating divs in modern browsers (2014)

5 Answers5

Try below css and html

CSS

HTML