Question

I have a div where I need to align text in a vertical fashion like in a list (ul/li). I’ve tried lists, table cells, paragraphs and a few other things with no success. Most of my attempts caused the results to be outside of my containing divs – .header and .headerright.

Here’s my stripped down code:

HTML :

<div class="header">
    <div class="headerleft">
    </div>
    <div class="headerright">
            Line 1 Text
            Line 2
    </div>
</div>

CSS :

div.header {
    height:75px;
    background-color:#FFF;
    padding-left:10px;
    padding-right: 10px;
}
    div.headerleft {
    border: none;
    float: left;
    margin: 0;
    padding: 0;
    line-height: 75px;
}

div.headerright {
    border: none;
    float: right;
    margin: 0;
    padding: 0;
    line-height: 75px;
}

What I need is the text “Line 1 Text” and “Line 2” to appear like in a list with “Line 2” appearing under “Line 1 Text”. This block of text should be centered in the containing div and “Line 2” should be centered under “Line 1 Text” like here:

Line 1 Text
   Line 2

The only browser I’m concerned about is IE9. How can this be done? I’m stumped.

Answer 1

Put your text inside span elements. It works for me.

CSS :

div.headerright {
    border: none;
    float: right;
    margin: 0;
    padding: 0;
}

/* css rule to display span elements.  */
span{
    display:block;
}

HTML :

<div class="header">
    <div class="headerleft">
    </div>
    <div class="headerright">
        <span>Line 1 Text</span>
        <span>Line 2</span>
    </div>
</div>