Chetan Shankar Chetan Shankar - 3 months ago 9
CSS Question

textarea width:100% not working in case of absolute position

here is the code i am using,

html

<div class="chatbrd">
<div class="newmsg">
<form action="" method="post">
<textarea placeholder="type a message" type="text" name="msg" >
</textarea>

<button type="submit" name="newmsg" value="submit">send</button>
</form>
</div>
</div>


CSS

.chatbrd
{
height:800px;
position:relative;
overflow:auto;
max-height:200px;
border:1px solid black
}

.newmsg
{
position:absolute;
bottom:0;
max-width:600px;

}
.newmsg textarea
{
width:100%;

}


see here jsfiddle

i want that the width of a textarea should be equals to the width of outer div
but i stucked.

Answer

You need to give the parent width: 100%; which will still adhere to the max-width: 600px. This is because the child text area needs to know of what its taking 100% width.

JS Fiddle

.newmsg {
   position:absolute;
   bottom:0;
   max-width:600px;  
   width: 100%;
 }