Position floating divs at the bottom of the page

Question

Position floating divs at the bottom of the page

Check out this example on JSFiddle: I'm trying to make the left column align to the bottom, but I can't seem to figure it out.

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

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

UPDATE: I've made some changes based on Vitorino and Danko's solutions in my updated JS Fiddle here. http://jsfiddle.net/magwalls/rdrznzhe/12/

html css

Answer 1

Answer №1

From my understanding, the vertical alignment of floated elements cannot be set directly. However, one alternative is to use inline-block and float other elements as a workaround:

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

To see this in action, check out this Demo Fiddle

Keep in mind that when using inline-block, you may need to address the space between elements. Here is a helpful resource on handling this issue: CSS TRICKS. In this case, I have used the comment 

Answer 2

From my understanding, the vertical alignment of floated elements cannot be set directly. However, one alternative is to use inline-block and float other elements as a workaround:

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

To see this in action, check out this Demo Fiddle

Keep in mind that when using inline-block, you may need to address the space between elements. Here is a helpful resource on handling this issue: CSS TRICKS. In this case, I have used the comment 

Answer 3

Answer №2

Here is a suggested solution:

Check out the JS Fiddle example

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

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

We have added the .wrap class to the

<div width="100%" class="clear wrap">

(parent div) in order to clear the float of .fr or it will have a height of 0px.

Answer 4

Here is a suggested solution:

Check out the JS Fiddle example

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

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

We have added the .wrap class to the

<div width="100%" class="clear wrap">

(parent div) in order to clear the float of .fr or it will have a height of 0px.

Answer 5

Answer №3

Let's change things up a bit by using the display: table property and making some adjustments to your HTML structure. Here's how we can lay it out:

<div class="table">
    <div class="cell left">I will be vertically aligned at the bottom</div>
    <div class="cell">I will consist of three rows</div>
</div>

Now let's tackle the CSS. Feel free to make any necessary tweaks. In this scenario:

html,body { height: 100%; } allows the wrapper div to have a percentage-based height
The wrapper div is styled with display: table, height: 100%, and width: 100%
The two "columns" use display: table-cell to function as columns
The left column has vertical-align: bottom applied
.cell > div selects direct child div elements of the .cell class, each being assigned a height of 33.33% for even distribution across 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 the last child */  
}

<div class="table">
    <div class="cell left">This should be aligned at the bottom</div>
    <div class="cell">
        <div>Row 1</div>
        <div>Row 2</div>
        <div>Row 3</div>
    </div>
</div>

Answer 6

Let's change things up a bit by using the display: table property and making some adjustments to your HTML structure. Here's how we can lay it out:

<div class="table">
    <div class="cell left">I will be vertically aligned at the bottom</div>
    <div class="cell">I will consist of three rows</div>
</div>

Now let's tackle the CSS. Feel free to make any necessary tweaks. In this scenario:

html,body { height: 100%; } allows the wrapper div to have a percentage-based height
The wrapper div is styled with display: table, height: 100%, and width: 100%
The two "columns" use display: table-cell to function as columns
The left column has vertical-align: bottom applied
.cell > div selects direct child div elements of the .cell class, each being assigned a height of 33.33% for even distribution across 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 the last child */  
}

<div class="table">
    <div class="cell left">This should be aligned at the bottom</div>
    <div class="cell">
        <div>Row 1</div>
        <div>Row 2</div>
        <div>Row 3</div>
    </div>
</div>

Position floating divs at the bottom of the page

Answer №1

Answer №2

Answer №3

Similar questions

Why do I need to double-click? (JavaScript onclick event handler)

Encase a group of child elements within a parent container using

Indicate the initial position of the scroll bar

In Chrome, the latest SVG border-image-source is not functioning properly

What is the reason behind H1 tags not requiring a class or ID in CSS?

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

Discovering the differences between input values in HTML when using scripts

Center element horizontally at a specified breakpoint and below

Ways to update HTML content generated by Ajax

Navigate from the upper left corner to the lower right corner while hovering

What steps should be taken to convert the field into a search icon?

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

expanding menu options in a dynamic design

Angular application causing issues with sticky top navigation bar

Ways to create sidebar images in a dual-column layout

What are the steps for implementing timezone-js?

Mobile display issue with CSS columns when using the :checked pseudo class

What is the best way to ensure uniform lengths for both labels and inputs?

Using HTML, jQuery, and JSON with an AJAX call to populate two web tables stacked on top of each other

Utilizing bootstrap for a responsive design that includes max-height constraints and horizontal