The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Trouble sizing a textarea inside a div

  • # March 15, 2013 at 11:02 am

    I’m new here, having spent a few days looking at demos and lurking on your forums, but now I’m having an issue that I can’t seem to solve.

    I think [this]( “CodePen”) illustrates the problem.

    I have a div that, when clicked, contains a textarea that the user can edit. Then, when the textarea loses focus, it is removed and the text is updated in the div.

    No matter what I do, I can’t seem to reliably position the textarea inside the div in a way that shows the same in different resolutions.

    Hopefully someone can help with this.


    # March 15, 2013 at 11:28 am


    Why not try adding

    textarea {

    Better yet, why not just put a textarea over your div and set its placeholder to what you want?

    # March 15, 2013 at 11:42 am

    @JohnMotylJr I think that works perfectly for me. Even if there are some things I need to change, I’m pretty sure you’ve covered everything I need.

    Are there any browser issues with box-sizing? I have to support IE9 for this.


    # March 15, 2013 at 12:50 pm

    Border-Box is supported IE8 on up, refer to [Can I Use Box-Sizing]( “”). If you need to attack IE7 > then I would reccomend using Paul Irish’s suggestion for [IE CSS Targeting]( “”).

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed