...

View Full Version : <DIV> and <TEXTAREA> positioning/sizing



Vibrance
08-09-2011, 03:16 AM
Hello,

I can't seem to work this one out. The code is below this post (I dont currently have access to webspace so if you could paste this into a HTML file to test, that would be great. The problem is:

I am trying to make the <div> with the red border ("pastedatawrapper") extend to the right edge of the <div> with the blue border ("pastewrapper"), and also for the textarea inside this div to extend across the entire length and height of this div (the white area).

Any other comments in regards to my CSS (and if what I am trying to achieve could be done a better/different way) would be much appreciated, thanks.


<!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 {

float:left;
border: 1px solid red;
}

#pastearea {}
</style>
</head>

<body>
<div id="pastewrapper">
<div id="lines"></div>
<div id="pastedatawrapper">
<textarea id="pastearea">Test text<br />Test line 2</textarea></div>
</div>

</body>

</html>

Lerura
08-09-2011, 04:14 AM
Useally divs do what you are trying to achieve, but you have use floated your div, which overides that default behavior.
When floating a div it shrinks horizontally, becomming only as wide as it need to be able to contain the widest child-element.
The main purpose of floating is that text can wrap around the element.

To me it looks like you are trying to make the div stay on the left side of the container.

remove the float from the div and it will expand.

Vibrance
08-09-2011, 04:23 AM
Excellent, that has increased the div to the width of the other div. However, how can I increase the height of this div so that it reaches the bottom of the white section, or increase the height/width of the textarea to fill the entire red bordered div (and white section).

Thanks

bullant
08-09-2011, 04:26 AM
Not sure what your empty lines div is meant to do so I have left it out of the css.


<!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;
}
#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<br />Test line 2</textarea>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum