Absolutely Positioned Textareas

One method that I've been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based.

textarea {
  position: absolute;
  left: 5px; 
  top: 5px;
  right: 5px; 
  bottom: 5px;
}

I tried positioning a textarea using this technique and everything looked fine in Webkit but the moment I went to check it in other browsers, I was surprised to find it wasn't respecting the right and bottom values. Yes, the element was absolutely positioned. And yes, the left and top values were working fine. Right and bottom? Ignored.

This didn't work in IE7, IE8, Firefox 4, and Opera 11. It worked in Chrome 10 and Safari 5.

While there may be another way to resolve this, I went with the solution I know would work: wrap the textarea in another element, position that element using the technique I wanted, style it to look like a textarea, and then set the textarea to a height and width of 100% and removing all margin and borders.

div {
  position: absolute;
  left: 5px; 
  top: 5px;
  right: 5px; 
  bottom: 5px;
  border: 1px solid #CCC; /* style like textarea */
}

textarea {
  width: 100%;
  height: 100%;
  margin: 0; /* don't want to add to container size */
  border: 0; /* don't want to add to container size */
}

Of note, I left padding out of the equation here since it wasn't a factor. If you wished to adjust the padding, you'd want to apply it to the DIV, set a background colour and remove those styles from the textarea as well.

Published March 31, 2011
Categorized as HTML and CSS
Short URL: http://snook.ca/s/996

Conversation

23 Comments · RSS feed
Kevin Potts said on March 31, 2011

Jonathan -- I have also observed this behavior, and I use the same workaround. Is there something in the spec that would render textareas differently than other form elements?

Jonathan Snook said on March 31, 2011

@Kevin, I didn't take a look at the spec to see what the expected behaviour should be. I'm hoping somebody else will and mention it here. :)

Benjamin said on March 31, 2011

This technique perfectly mimics a textarea in look but not in padding. Right now if you click in the padding of a textarea it'll focus the textarea, but here if you click in the padding of the div, the textarea won't receive focus.

A little javascript can fix that though.

Jonathan Snook said on March 31, 2011

@Benjamin: Thanks for clarifying that. Indeed, that's why I've left padding out of the equation.

Thomas said on March 31, 2011

Concerning Firefox, it may be *related* to this bug (but different): https://bugzilla.mozilla.org/show_bug.cgi?id=437722

See my testcase in different Chrome and then in Firefox: http://jsfiddle.net/j6dbm/

Jayphen said on March 31, 2011

How do you handle :focus highlighting? Of course you can remove it from the textarea with CSS & apply it to the container with JavaScript, but is this really a good solution? This means no focus highlighting for users without JavaScript.

Here's what it would look like in Webkit without removing the focus outline/border.

Jonathan Snook said on March 31, 2011

@Jayphen: we've avoided having to deal with :focus highlighting by not adding padding on the container. Otherwise, yes, you'd have to handle focus styling programmatically (or use no focus styling at all).

philippe said on March 31, 2011

Webkit is wrong. Gecko is correct. Textarea and other form controls are replaced elements, and as such have an intrinsic width. What applies here is CSS2.1:10.3.8

Jonathan Snook said on March 31, 2011

@Philippe: I figured somebody would chime in with relevant information. Thanks for linking to the spec.

Vasiliy Aksyonov said on March 31, 2011

Why not to use box-sizing: border-box and set any width you want? Works everywhere except IE<9

Jonathan Snook said on March 31, 2011

@Vasiliy: Because I need it to work everywhere including IE<9 :)

Dom Christie said on April 01, 2011

Interesting. I've been looking into doing the same thing for set of reusable base styles for forms: https://github.com/pigment/inputs.

The best I've come up with is to apply the following CSS to the textarea's container:

margin-right: textarea-padding + horizontal-border-widths;
overflow: visible;

This way, the textarea will overflow it's container, but appear fixed to the container's container (make sense? - see example in the github repo above).

Chris Coyier said on April 01, 2011

Possibly of note: you could ONLY set the bottom/right in Firefox and that would be OK, it's just setting all four that isn't going to happen because of the intrinsic width.

Jacob Rask said on April 01, 2011

For the record, IE8 supports box-sizing just fine, and it's an awesome property.

Dom Christie said on April 01, 2011

Oo. Missed the bit about locking the top/bottom. hmmm

Dom Christie said on April 01, 2011

...or a combination of the two?


textarea {
  padding: 5px;
  border: 1px solid #ccc;
  width: 100%;
  height: 100%;
}

.textarea-container {
  margin-right: 12px;
  margin-bottom: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
}

Marc said on April 07, 2011

This is great! I just made it into a snippet in TextMate! Thanks man.

Oleg Levshin said on April 08, 2011

Hi! Do you try to apply display: block to text area with first technique? This works fine.

Oleg Levshin said on April 08, 2011

Sorry... I not fully understand the problem.

Pete said on April 21, 2011

On the project I'm working on just now I'm using box-sizing property to get these benefits. Setting the input/textarea to 100% width, and for IE 6/7 that don't support box-sizing setting the width to something like 98% or less depending on how much padding and border is used.

I'd much rather do this than back date code to give perfect support to old versions of IE that will be nowhere in a few years. Though I guess there are still situations where you have to do this.

Collin said on April 22, 2011

you are the cure for my headache.... thank you so much.

appliance repair Santa Monica said on May 04, 2011

I’m nonetheless learning from you, however I’m improving myself. I definitely love reading everything that's written in your blog.Keep the stories coming. I beloved it!

Thomas Sabo Chains said on May 04, 2011

This is a good article. Just Keep it up! Thanks!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.