Francis Francis - 1 year ago 59
CSS Question

Placing a textarea and a form to the bottom of the div distorts the width of the textarea

I am trying to place a textarea and a form with input type submit to the bottom of the page. My challenge is that I can place the both to the bottom of the page but the width of the textarea gets distorted. This is my code:

.msg_input {
width: 100%;
border: 1px solid white;
border-top: 1px solid #DDDDDD;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
.goBottom {
position: fixed;
bottom: 0;

<div class="goBottom">
<textarea placeholder="...type here" class="msg_input" rows="4">

<form method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Exit" />

the width of the textarea is not taking the full width 100% of the page. Please what could be wrong?

Answer Source

Update the following css:

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

Reason this should work: The fixed position element doesn't seem to take full width. Hence this makes sure that it is. textarea takes full width of goBottom element.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download