How to reserve some space with specific dimenions inside a textarea before texts using CSS?

Question

I have a <textarea>. It has some specific size, say 400px X 400px. I can type inside it. But I should be able to type after leaving some space, and the cursor should stop there if i clear the text, like using backspace.

Below is an image showing what I am trying to say;

Layout

It is like a div inside a div. The text should not appear on the space with orange color. That doesn't mean that the div may acts as an overlay so that text may remain beneath it. It is not a matter of simple overlay. How can I do this using HTML and CSS alone?

Good question! In a normal textarea you cant. However in a WYSIWYG editor like CKeditor you can... Or you try and find a script that can change a div into a textarea. — GreyRoofPigeon, Aug 18 '13 at 16:57

score 1 · Answer 1 · answered Aug 18 '13 at 17:07

1

You can try using HTML5 ContentEditable.

HTML Code

<div id='wrapper'>
    <div id='box'></div>
    <div contenteditable='true' id='edit'>
    </div>
</div>

CSS Code

#box {
    background-color : orange;
    width : 100px;
    height : 100px;
    float : left;
    margin : 0 10px 10px 0;
}
#wrapper {
    border : 1px solid red;
    padding : 10px;
}
#edit {
    height : 300px;
}

JSFiddle Demo : http://jsfiddle.net/6gkHV/2/

See if this helps.

answered Aug 18 '13 at 17:07

Sasidhar Vanga

3,384
2
26
47

Very nice, I was trying the same thing but couldn't get it. The trick is to float the internal div left. – eshellborn Aug 18 '13 at 18:09

How to reserve some space with specific dimenions inside a textarea before texts using CSS?

1 Answers1