CODEWITHSUNDEEP
htmlcss
Holly
Holly

Reputation: 1976

h3 not aligning to the right

My css is the bit of a mess at the mo' and the problem area has 2 style sheets applied.

I have a header that no matter what i change i can't get to align to the right and i'm really stumped. I could do with some help solving the problem.

If you were to go to http://c3it.webuda.com/news_and_events.php and ctrl+f for "see other events" you can see the heading in question that stubbornly stays left-aligned, when i "inspect element" through google chrome it says the property text-align: right is active but no difference.

The first stylesheet being applied is this one.

And the page specific style sheet im using is here.

I really am stuck and would really appreciate anyone who takes the time to look. Below you'll find the specific <h3> styles, but i can only assume there's some other styling prevailing somewhere i haven't noticed.

The Html

 <h3 id="expand_other_events">See other events..</h3>

from stylesheet 1:

#content h1, #content h2, #content h3{
        color: #2956B2;
        text-align: left;
        font-weight: normal;
        font-family: "Ropa Sans", MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    }
 #content h3{
        padding: 0.3em 0;
        margin-left: 1.2em;
        display: inline;
        cursor: hand;
        cursor: pointer;
        font: bold 1em 'Rokkitt', serif;
        border-bottom: 1px solid #2956B2;

    }

from stylesheet 2:

#news_and_events h3{
    margin: 0;
    padding:0;
}
#news_and_events  p.date,
#news_and_events h3{
    text-align: right;
    font-size: 0.8em;
    color:#aaa;
}

Upvotes: 2

Views: 8277

Answers (3)

Lowkase
Lowkase

Reputation: 5699

You have h3 set as inline, you will need to change it to:

display:block;

Upvotes: 1

JGrubb
JGrubb

Reputation: 889

You got display: inline set on that, so it won't span the full width of that div. it is right aligned, but the h3 is only as wide as the text.

Upvotes: 3

Josh
Josh

Reputation: 12566

It's because the h3 is only as wide as it is showing, therefore right / left aligned text still fill the same bounds.

Add a float:right; to it, and it goes all the way to the right, where I'm guessing you want it to be.

Upvotes: 2

Related Questions