Reputation: 1847
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
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
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
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
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