Fitting <textarea> inside <div>

Vibrance

08-12-2011, 12:01 AM

Hello,

I've tried alot of things and can't seem to work this one out. It was working before (I think) but after making some changes, it is no longer working. I want the red bordered div ("pastedatawrapper") to only occupy the white box on the screen and not extent to the left so that it is also "containing" the grey box. I want the red bordered div to start from the right edge of the grey "lines div". I also want the textarea to appear within and ONLY within the boundaries of the "pastedatawrapper" div (the pastedatawrapper div is basically only made to hold the textarea.

Code is below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
body {
background-color: #EEE;
}

#pastewrapper {
margin: 0px 150px 0px 0px;
height: 700px;
background-color: white;
border: 1px solid blue;
}

#lines {
width: 30px;
height: 100%;
background-color: #CCCCCC;
border-right: 1px solid black;
float:left;
}

#pastedatawrapper {

width: 100%;
height: 100%;
border: 1px solid red;
}

#pastearea {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="pastewrapper">
<div id="lines"></div>
<div id="pastedatawrapper">
<textarea id="pastearea">Test text</textarea></div>
</div>

</body>

</html>

bullant

08-12-2011, 12:57 AM

This appears to be the same question as posted in this thread (http://www.codingforums.com/showthread.php?p=1121667#post1121667).

Vibrance

08-12-2011, 02:20 AM

Different issue. The red bordered div is also encompassing the grey lines div and I want the left edge of the red border to BEGIN from the right edge of the grey div ("lines") so that the red bordered div is only containing the text area, and not containing the grey div

LlamaFromHell

08-12-2011, 08:50 AM

The following code worked for me.

You cannot have to #pastearea css set to 100% width and height or it pops out of the pastedatawrapper div.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
body {
background-color: #EEE;
}

#pastewrapper {
margin: 0px 150px 0px 0px;
height: 700px;
background-color: white;
border: 1px solid blue;
}

#lines {
width: 30px;
height: 100%;
background-color: #CCCCCC;
border-right: 1px solid black;
float:left;
}

#pastedatawrapper {

width: 100%;
height: 100%;
border: 1px solid red;
}

#pastearea {
width: 98%;
height: 99%;
}
</style>
</head>
<body>

<div id="pastewrapper">
<div id="lines"></div>
<div id="pastedatawrapper">
<textarea id="pastearea">Test text</textarea>
</div>
</div>

</body>

</html>