3

I have 3 span tags (x, y, and z) within a div tag, with span z being the last span in div. I want the text within span z to be shown at lower right cornor of div. How can I do that?

I have tried the following code but it does not work:

<span align="right" style="font-size: 0.76em;" >my text here</span>
talemyn
  • 7,822
  • 4
  • 31
  • 52
jslearner
  • 21,331
  • 18
  • 37
  • 35

3 Answers3

6

span is not a block level element, so I don't think you can position it relative to another element.

Make it a div with style="position:absolute;right:0;bottom:0;text-align:right'

Make sure that the containing div has style="position:relative;" to contain the absolute object.

JSfiddle: http://jsfiddle.net/gHZqs/

Edit

You can use the span tag instead of the div, as the others have said. However span tags are for inline content. If you take the content out of the flow with absolute positioning then you should use a div IMO. If you're working within a framework or something and you need to use the span tag then I wouldn't lose any sleep over it. Here's a link on a similar question:

SPAN vs DIV (inline-block)

Community
  • 1
  • 1
RSG
  • 7,013
  • 6
  • 36
  • 51
5

Much the same as @RSG is saying however you can use a span instead of converting it to a DIV. Assign the parent container position:relative and then assign the span.z with the following css:

span.z{
    position:absolute;
    bottom:0;
    right:0;
}

See working example here: http://jsfiddle.net/crYaw/1/

HTML:

<div id="container">
    <p>Test here. Test here. Test here. Test here. Test here. Test here. Test here. Test here. </p>
    <p>This is some <span class="x">more</span> text</p>
    <p>This <span class="y"is some</span> >more text</p>
        <span class="z">Float me bottom right</span>
</div>

CSS:

#container{
    position:relative;
    width:500px;
    height:200px;
    background-color:#eee;
}

span.x{
    font-weight:bold;
}

span.y{
    color:red;
}

span.z{
    position:absolute;
    bottom:0;
    right:0;
}
Dan
  • 10,171
  • 7
  • 38
  • 31
  • Here's a similar question on divs vs spans. http://stackoverflow.com/questions/1611065/span-vs-div-inline-block I'm not a validation nazi, but if you remove a span from the inline flow you should probably use a div. – RSG Mar 11 '11 at 17:54
0

There is a text-align css value that can be used but it only applies to block level elements and the contents within the block level element (in this case your div). Since you don't want all items in the div aligned to the right you can either float:right; the z span or wrap it in another div that has text-align:right;. Here are both solutions:

http://jsfiddle.net/y9pvv/1/

Adam Ayres
  • 8,732
  • 1
  • 32
  • 25
  • thanks: worked, but i want to have some space left on extreme left while showing text.do i need to use padding right?can u plz show me one eg – jslearner Mar 11 '11 at 05:37
  • 1
    The option to float to the right doesn't really work as it sits to the top when more content is added: http://jsfiddle.net/y9pvv/2/ – Dan Mar 11 '11 at 05:39
  • Do you mean that you want space left on the extreme right? You can put a padding on the `.container` to control spacing: http://jsfiddle.net/y9pvv/3/ – Adam Ayres Mar 11 '11 at 05:41
  • @Dan Good catch regarding my option 1, I agree more markup is not ideal. – Adam Ayres Mar 11 '11 at 05:43