Question

I have the following:

http://jsfiddle.net/B8e8A/

I have the headers with width: 50%; and a span inside the h2 tags to help me achieve this.

I am looking to make it so the heading is left aligned to the text, so that the header bars will be of different size, yet the bars will still stretch to the left of the screen. Is this possible?

Answer 1

Modify the following CSS:

Changes: Removed width:50%

h2 {
    background: none repeat scroll 0 0 #FF8C00;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    display: inline-block;
    font-size: 150%;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 15px 30px 15px 0;
    /*--width:50%*/
}

Changes: Float right to left, text-align right to left, added nowrap

h2 span {
    float: left;
    text-align: left;
    white-space: nowrap;
}

Example: http://jsfiddle.net/B8e8A/1/