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 I write a:hover::before in less file?

    How to style a single QToolButton using qss/css

    How to keep CSS from render-blocking my website?

    How To Layout a Grid in CSS

    How to load jQuery before CSS code?

    How to get the authored style properties of an element?

    how to style xml tag attribute with css

    How do I insert content after text in an html element using CSS?

    How to load CSS on PC and Mobile by jQuery?

    How to replace default html checkbox with just html+css and no images?

    How can I control the width of a
    with display:table; with a

    element inside with display:table-cell

    How to center css menu and get rid of left margin space in ie?

    How to include display:block in css code that includes pseudo element 'before'

    how to select last element in the page?

    PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?

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

    How to Edit the CSS File of the Installed Plugin in Wordpress

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    How to responsive the large background image using CSS (WordPress)

    How can I slow down my CSS Animated Text transitions?

    How to make a website to occupy the entire element?

    How to remove an overhanging div

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How to fix error from posting html element and prevent it from running

    how to make form input in middle

    How do I put a clear button inside my HTML text input box like the iPhone does?

    CSS: how to add a down arrow for the active link

    How to set size of font with CSS without using - hyphen?

    How to make a line before and after my h1 tag?

    How to prevent the vertical scroll of this div?