CODEWITHSUNDEEP
htmlcss
Magnus Wallström
Magnus Wallström

Reputation: 1529

Align floating divs to the bottom

Take a look at this jsfiddl example: I want the left column to align to the bottom. Shouldn't be that hard but I can't make it work.

http://jsfiddle.net/magwalls/rdrznzhe/

<div width="100%" class="clear">
  <div class="fl" width="50%">I want this aligned to bottom</div>
    <div class="fr" width="50%">
      <div>Row 1</div>
      <div>Row 2</div>
      <div>Row 3</div>
    </div>    
</div>
<hr class="clear"/>

EDIT: I updated my JS Fiddle with Vitorinos and Dankos solutions to my problem here. http://jsfiddle.net/magwalls/rdrznzhe/12/

Upvotes: 2

Views: 1671

Answers (3)

misterManSam
misterManSam

Reputation: 24692

Let's lay this out with display: table and change your HTML slightly. We'll lay it out like this:

<div class="table">
    <div class="cell left">I am going to be aligned at the bottom vertically</div>
    <div class="cell">I am going to contain three rows</div>
</div>

Now for the CSS. Tweak this as needed. In this example:

  • html,body { height: 100%; } allows the wrapper div to have a percentage height

  • The wrapper div is given display: table, height: 100% and width: 100%

  • The two "columns" are given display: table-cell and act like columns

  • The left column is given vertical-align: bottom

  • .cell > div targets direct children of the .cell class. In this example, these divs are each given 33.33% height to evenly space them out into rows

CSS / HTML / Demo

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.table {
    display: table;
    height: 100%;
    width: 100%;
    border-bottom: solid 1px #333;
}
.cell {
    display: table-cell;
    vertical-align: top;
    width: 50%;
}
.left {
    vertical-align: bottom;
    height: 100%;
    border-right: solid 1px #333;
    background: #DDD;
}
.cell > div {
    height: 33.33%;
    background: #EEE;
    border-bottom: solid 1px #333;
}
.cell > div:last-child {
    border-bottom: none;  /* no border for that last child */  
}
<div class="table">
    <div class="cell left">I want this aligned to bottom</div>
    <div class="cell">
        <div>Row 1</div>
        <div>Row 2</div>
        <div>Row 3</div>
    </div>
</div>

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you can do something like this

JS Fiddle

.fl {
position:absolute;
bottom:0;
}

.wrap{
width:100%;
display:inline-block;
position:relative;
}

added .wrap class for <div width="100%" class="clear wrap"> (parent div) to clear the float of .fr or will taking 0px height

Upvotes: 0

DaniP
DaniP

Reputation: 38252

As far I know you can't set the vertical alignment of floated elements, but you can try with inline-block and float other elements:

.fl, .fr {
    display:inline-block;
    vertical-align:bottom;
    width:50%;
}
.fr > div {
    float:right;
    clear:right;
}

Check this Demo Fiddle

Note if you use inline-block don't forget to remove the space CSS TRICKS in this case I use the comment <!-- -->

Upvotes: 1

Related Questions