CODEWITHSUNDEEP
css
Ambulon
Ambulon

Reputation: 1

Why is text-align:right not working in this instance?

I have an h2 as the sole item in a container div. I managed to get it to align to the bottom of its container using position:relative on the container and position: absolute / bottom:0 on the h2. However, I cannot get the h2 text to align to the right of the container div.

HTML:

<div id="section"><h2>About Us</h2></div

CSS:

#section {
    width:277px;
    height:89px;
    position:relative;
    background-image:url(../img/sect-title-bg.png);
    background-repeat:repeat-x;
    margin:-12px 0px 0px 0px;
}

#section h2 {
    text-align:right;
    margin:0;
    position:absolute;
    bottom:0px;
}

Link: http://www.distributionaccess.com/new/stempath/about.html

I've tried display:inline-block on the h2, but with no results.

Perhaps there is a better way to approach this whole "align an h2 to the bottom right of its container div" thing that what I have done here in general. I'm up for solutions / suggestions!

Upvotes: 0

Views: 4690

Answers (3)

Mister Epic
Mister Epic

Reputation: 16733

Get rid of position:absolute on your h2, that prevents it from being a normal block-level element so text-align won't work as expected. As the commenter pointed out, this will impact vertical positioning.

Otherwise expand the width of the h2:

 h2 { width:280px; }

or set the right property:

 h2 {right:0;}

Upvotes: 0

Jeffpowrs
Jeffpowrs

Reputation: 4540

It's out of the document flow add width 277px

Upvotes: 0

j08691
j08691

Reputation: 207900

To your #section h2 rule add right:0 and remove text-align:right. The text is actually being right aligned, but by positioning is absolutely you shrink the div wrapper to match the contents so you can't see it.

Upvotes: 1

Related Questions