CODEWITHSUNDEEP
htmlcsscss-float
M. Herold
M. Herold

Reputation: 714

Vertically aligning floating divs in modern browsers (2014)

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.

Upvotes: 2

Views: 310

Answers (5)

Shyam
Shyam

Reputation: 792

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>

Upvotes: -1

Daphnne
Daphnne

Reputation: 116

<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;
}

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

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

Upvotes: 1

davidpauljunior
davidpauljunior

Reputation: 8338

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

Upvotes: 1

2pha
2pha

Reputation: 10155

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/

Upvotes: 1

Related Questions