How to put textarea in div with CSS


Tags: html,css

Problem :

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?



Solution :

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;
}

    CSS Howto..

    how to give two different states in css?

    how to add a different css to last mysql query result using php

    How can I remove frame like background in twentysixteen theme

    How can I select the first paragraph in this code?

    Show bottom of an overflow string in a div with fixed height/width?

    How to structure a Grunt task for develop and release

    How do I remove the gap between div tags?

    How to center modal window in css+html?

    How to display a background image with a:hover

    how can I fetch a website and overwrite some ot its html and css [closed]

    How to create embossed borders in HTML, CSS? [closed]

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    How to force thumbnails to overflow right and not below

    How to set border to 0 in this table

    How to wrap between letter and punctuation to avoid extra blank space in the end of line?

    How to add CSS class dynamically to html element

    How to get image info from css into MasterPage'gridview?

    How to wrap a vertical overflow horizontally in css?

    How to create a pop up animation with a modal using css?

    hide and show Div on click

    How to break text inside a parent div with white-space:nowrap in CSS?

    How can I align my search button to the right?

    How to create a level 4 submenu with this css?

    How do I center a div between two other divs?

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How to do centered

    with
    on both sides over a background image

    Javascript - How to alter a property of a css class

    How to specify an element to re-appear after a page break?

    How do I remove the gap between the header and image slider

    Framework7->CSS: How to make tabs under popover scrollable