Bottom alignment

Question

I have two DIVs, one is left floated with bigger font size and the other one is right floated with smaller fonts. I want to align the smaller fonted DIV to the bottom aligned with the bigger sized text. Not able to achieve it.

and the css

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.font12 {
    font-size: 12px;
}

<div class="floatLeft">Activity</div>
<div class="floatRight font12 "><a href="javascript:void(0);">View timeline / Filter activities</a></div>

Don't `float`. Use Flexbox. You can 'float' anything anywhere with Flexbox. It's complex. Take your time to learn it. It's worth it. [This might be useful.](http://stackoverflow.com/questions/6116423/how-to-vertically-align-floating-divs-to-the-bottom/16929313#16929313) — Rudie, Mar 30 '15 at 18:25
@rudie using flexbox might be a tricky thing because you have to take care of handling it for all the different browsers and versions. Using `inline-block` is a much cleaner solution. — akshay, Mar 30 '15 at 18:34
@nicael CSS : .floatLeft{float: left;} .floatRight{float: right;} .font12{font-size: 12px;} default font of the page is 16px. — Maulik Balar, Mar 31 '15 at 02:32
@akshay this approach works, but here the second DIV comes just next to the first one. I want both of them aligned to left and right as I have coded. — Maulik Balar, Mar 31 '15 at 02:42

Delto · Answer 1 · 2015-03-31T02:55:02.010

1

Answer changed to allow for float as per your request.

Please see FIDDLE.

HTML

<div class="big">Activity</div>

<div class="small"> 
    <a href="javascript:void(0);">View timeline / Filter activities
    </a>
</div>

CSS

.big {
    float: left;
    font-size: 2em
}
.small {
    float: right;
    position: relative;
    font-size: 1em;
    top: 13px;
}

edited Mar 31 '15 at 02:55

answered Mar 30 '15 at 18:27

Delto

321
2
14

this approach works, but here the second DIV comes just next to the first one. I want both of them aligned to left and right as I have coded. – Maulik Balar Mar 31 '15 at 02:42
this solution will wrap the smaller div below the `.big` div when the screen size is smaller – akshay Mar 31 '15 at 02:59

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Demo page

CSS needed:

.big {
    display:inline-block;
    vertical-align:bottom;
    /* just for demo: */
    font-size: 2em;
    height:200px; 
    background:#FADDFF;
}

.small {
    display:inline-block;
    vertical-align:bottom;
    /* just for demo: */
    font-size: 1em;
    background:#D2E9F7;
    height:120px;
}

so making the two elements inline-block displayed, and vertical-align with value of bottom, they will be on the same level, and they're line of reference will be the bottom of them both

score 0 · Answer 3 · answered Mar 30 '15 at 18:39

Additional to the above response, you can use display: table-cell to fit both div's to the same height:

.floatLeft {
    border: 1px solid black;
    font-size: 30px;
    width: 200px;
    display: table-cell;
    vertical-align: text-bottom;
}
.floatRight {
    border: 1px solid black;
    font-size: 12px;
    display: table-cell;
    vertical-align: text-bottom;
    width: 200px;
}

<div class="floatLeft">Activity</div>
<div class="floatRight font12 "><a href="javascript:void(0);">View timeline / Filter activities</a></div>

Here is the jsfiddle: https://jsfiddle.net/x3m72kqh/

this approach works, but text of both the divs can change, in that case fixing width of them is not a good idea. And I want both of them aligned to left and right as I have coded. — Maulik Balar, Mar 31 '15 at 02:39

score 0 · Answer 4 · answered Mar 31 '15 at 03:01

JSFiddle: Solution in JSFiddle

Here is a solution with inline-block :

.big {
    display:inline-block;
    width: 50%;
    float: left;
    font-size: 2em
}
.small {
    display:inline-block;
    width: 50%;
    font-size: 1em
}
a {
    float:right;
}

Bottom alignment

4 Answers4

CSS needed: