CODEWITHSUNDEEP
htmlcsstextareapositioning
behz4d
behz4d

Reputation: 1847

How can I position a span in the top right of a textarea?

I have a text area with id="aboutme" and an span with class="maxlength-feedback", I want the span to be positioned in the top-right-hand corner of the textarea. It will be a counter for the text area.

I know both elements should have position="relative" and the span should be display="inline-block", but it's not working.

I would appreciate any help. Thanks.

Upvotes: 9

Views: 30524

Answers (3)

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Html

<div>
    <span class="mySpan">Some Text</span>
    <textarea class="myTextArea"></textarea>
</div>

CSS

div{
    position: relative;
    float:left;
}

.mySpan{
    position: absolute;
    right: 0px;
}

Working Example: http://jsfiddle.net/VSWXs/

Upvotes: 2

LorDex
LorDex

Reputation: 2636

no, maxlength-feedback has to be absolute positioned, like this;

#aboutme {
 position:relative;
}

.maxlength-feedback {
position:absolute;
right: 0; /* or so */
top: 0; /* or so */
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157444

Just do it like this

Explanation: Wrap your textarea inside a container div and give position: relative; to the container, and position: absolute; to span, now to be sure your div default behavior which is display: block; will make your span flow on the extreme left so use display: inline-block; for your container div

Demo

HTML

<div class="wrap">
    <textarea></textarea>
    <span>Counter</span>
</div>

CSS

.wrap {
    position: relative;
    display: inline-block;
}

.wrap span {
    position: absolute;
    top: 0;
    right: 0;
}

Upvotes: 24

Related Questions