CODEWITHSUNDEEP
csscss-float
Glenn
Glenn

Reputation: 551

Align headers with text

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?

Upvotes: 1

Views: 23

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

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/

Upvotes: 2

Related Questions