CODEWITHSUNDEEP
cssvertical-alignment
topherg
topherg

Reputation: 4293

Vertical Align to bottom with single Element

I have a holder div that has specific dimensions, and has a single child element of varying height, and I am trying to align it to the baseline. Currently, I have a second element that is the same fixed height as the container which makes it aligned to the bottom, but if it is on its own, it sticks to the top, regardless of what rules are applied.

So, how can I vertically align an element to the bottom of a container if it is the only child element?

EDIT

While in the process of putting up the code that I am using, I came up with a solution which I have posted. The initial problem is similar to that, but without the position rules, and display:inline-block on the child elements. That is pretty much the long and short of it...

Upvotes: 1

Views: 1025

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

One way using table-cell

Assuming the bare bones markup:

<div class="wrap">
    <div>Some content...</div>
</div>

the following CSS will do it:

.wrap {
    border: 1px solid red;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: bottom;
}

Major advantage: works with both inline and block level elements.
Disadvantage: Older browsers don't recognize display: table-cell

Demo at: http://jsfiddle.net/audetwebdesign/eXKbt/

Alternate way using inline-block

You can also do it this way by applying the following CSS:

.wrap2 {
    border: 1px solid red;
    height: 200px;
    width: 200px;
}
.wrap2:before {
    content: "";
    width: 0;
    height: 190px;
    display: inline-block;
}
.wrap2 div {
    display: inline-block;
    width: 190px;
    border: 1px dotted red;
    vertical-align: bottom;
}

However, this approach involved using a pseudo-element to define a fictitious inline block to set a baseline nearly the full height of the box and then using vertical-align on the child element. There were some issues related to the width but it can be made to work.

See earlier fiddle for demo.

Upvotes: 1

topherg
topherg

Reputation: 4293

Damn it, thought of a solution after posting the question which works nicely:

Parent Element:

.parent {
    height:200px;
    position:relative;
    width:200px;
}

Child Element:

.parent > * {
    bottom:0px;
    left:0px;
    position:absolute;
    right:0px;
}

The height of the Child element is then defined by block elements within it, but it sticks to the bottom

Upvotes: 2

rolfsf
rolfsf

Reputation: 1851

Not much detail to go off of, but maybe something like this

.container {
  position: relative;
}

.child-element {
  position: absolute;
  bottom: 0;
}

Upvotes: 1

Related Questions