How to bottom align a title of variable length


Tags: html,css

Problem :

I have a design where I need to align a header to some content in another column.

The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.

(The below is just some demo code to highlight my issue)

<div class="container">
    <div class="header-container">
        <h1>Short title</h1>
    </div>
    <div class="header-container">
        <h1>This is a much longer title title</h1>
    </div>
</div>​

.header-container 
{
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    float: right; 
    border-bottom: 1px solid #bbb;        
}​

Please see

http://jsfiddle.net/bmxSY/

So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.

EDIT* The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...

<div class="container">
    <div class="span4">
        <div class="header-container">
            <h1>Short title</h1>
        </div>
    </div>
    <div class="span8">
        <div class="header-container">
            <h1>This is a much longer title title</h1>
        </div>
    </div>
</div>​

.header-container {
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    border-bottom: 1px solid #bbb;
    text-align: left;
}

.span4 
{
    width:60%;
    float: left;
}

.span8
{
    width:40%;
    float: left;
}



Solution :

Actually it is not possible, but by tricking, we can do it.

.outer {
    position:relative;
    display:table;
    height: 200px;
    width: 200px;
    vertical-align: middle; 
    text-align: center;
    border: 1px solid #CCCCCC;
    background:red;
    float:left
}
.inner {
    width:100%;
    display:table-cell;
    vertical-align:bottom;
    position:relative;
}
p{background:blue;border:1px solid #000}

Demo: http://www.pmob.co.uk/temp/vertical-align9.htm


    CSS Howto..

    How to have the cutout of a div at the bottom right with shadow to the left

    AngularJS how to put both ng-class and CSS class

    html css - how to create multiple column list?

    How to write below CSS lines in zend framework 2 syntax?

    How do I align three columns to the center using CSS?

    How to assign a Css class on an item based on click

    How to add a twitter-bootstrap icon as a CSS background-image?

    How to disable CSS in Browser for testing purposes

    Adding css resource to a QuickTip in ExtJS not showing

    css 3d animation, how?

    How to remove white border from blur background image

    How to write multiple css selectors in one line?

    How to create transparent background color in html & css [duplicate]

    How can I use javascript, html and css to make an image a button, which can do the following?

    How to set background url for css files in thymeleaf?

    How to make a button that can change background color of a doucment?

    Show first image and display none other image

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How to force inline-block wrap to new line using CSS or jQuery?

    How to change visibility of Calendar on textbox click

    How to transform Menu icon to Arrow icon? [closed]

    How to specify a html tag on a LESS CSS nested class?

    How to use jQuery UI icons without buttons?

    How do I make a left-aligned unordered list to the right of a left-aligned picture?

    How to apply ckeditor css to output

    In html how do I have table within table look visually the same as if I didnt have the inner table

    How to use GitHub's primer and octicons?

    How to draw mobile device edge using CSS?

    How to fix the my Anchor link issue [duplicate]

    css: how to make the third div line up with the first div