CODEWITHSUNDEEP
htmlcss
Larry Lu
Larry Lu

Reputation: 1661

How to put textarea in div with CSS

I have a textarea in div.
This is my code:

#mdDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 650px;
    width: 300px;
    background-color: blue;
}

#mdText {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 18px;
}

<div id="mdDiv" >
    <textarea id="mdText">Hello World</textarea>
</div>

It shows this:
enter image description here

But I want the distance between text area and div is 10.
So I set

top: 10px;
bottom: 10px;
left: 10px;
right: 10px;

but the right distance is too big.
How do I do to set the distance between text area and div?

Upvotes: 1

Views: 1615

Answers (5)

S. Divya
S. Divya

Reputation: 91

CSS

 #mdDiv {
position: absolute;
top: 0px;
left: 0px;
height: 650px;
width: 245px;
background-color: blue;
}

#mdText {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
font-size: 18px;
}

Upvotes: 1

Paran0a
Paran0a

Reputation: 3457

Alternative solution would be to disregard positioning and just use padding.

#mdDiv {
    height: 650px;
    box-sizing: border-box;
    padding: 10px;
    width: 300px;
    background-color: #00F;
}

#mdText {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
<div id="mdDiv" >
    <textarea id="mdText">Hello World</textarea>
</div>

Upvotes: 2

PHPDev
PHPDev

Reputation: 81

Take out the absolute on the Textarea.

#mdText {
    width: 100%;
    margin: 10px;
    font-size: 18px;
}

Or add padding to the parent

padding: 10px;

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6328

Why are you used absolute position of div? If you don't need remove that form both div.

And using padding to main div or parent div to add spacing.

HTML:

<div id="mdDiv" >
    <textarea id="mdText">Hello World</textarea>
</div>

CSS:

#mdDiv {       
    height: 650px;
    width: 300px;
    background-color: blue;
    padding:10px;
}

#mdText {
  font-size: 18px;
    width:297px;
    height:100%;
}

Here is example of jsfiddle: https://jsfiddle.net/r49fkLz0/

Upvotes: 1

arkascha
arkascha

Reputation: 42915

Use margins and relative sizing instead of absolute positioning: 

#mdDiv {
    height: 650px;
    width: 300px;
    padding: 0;
    background-color: blue;
}
#mdText {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    padding: 0;
    font-size: 18px;
}

Often this can also be simplyfied: 

#mdDiv {
    height: 650px;
    width: 300px;
    padding: 10px;
    background-color: blue;
}
#mdText {
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 18px;
}

Upvotes: 3

Related Questions