CODEWITHSUNDEEP
htmlcss
Alfred
Alfred

Reputation: 21396

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

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?

Upvotes: 2

Views: 1083

Answers (1)

Sasidhar Vanga
Sasidhar Vanga

Reputation: 3404

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.

Upvotes: 1

Related Questions