Home/ Questions/Q 8204597
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T07:56:48+00:00

I’ve been playing with responsive layout and forms. I’m quite pleased with what I

  • 0

I’ve been playing with responsive layout and forms. I’m quite pleased with what I have so far: it works nicely from mobile to wide screen; see below. (Only tested on firefox/chrome so far.)

At the 800px width it moves the message block to the right column. The problem is that this is done with a float:right and position:absolute, which means its height stops affecting the surrounding div. So the message box sticks out.

I can (and do) improve this by adding the height:220px, so that it looks okay by default. But someone can still resize the textarea outside of the surrounding div. I find resizing textareas a wonderful feature, so don’t want to disallow the resizing. And overflow:auto is not a solution: the user would just be exchanging scrollbars on the textarea for scrollbars on the div!

So, is there any way to have the outer div resize to always contain the textarea?

<html>
<head>
<style>
body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;}

#contactform {margin: 0 auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;}
#contactform .required:after{color:red;content:" *";}
#contactform label {display:block;}
#contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;}
#contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;}

@media (min-width: 800px) {
#contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/}
#formsecondhalf {top:0;right:6px;position:absolute;}
#contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;}
#contactform input,textarea {width: 300px;min-width:300px;max-width:300px;}
}

</style>
</head>
<body>
<div id="contactform">
<form action="" method="post">
<label for="name" class="required">Name:</label>
<input id="name">
<br/>
<label for="email" class="required">Email:</label>
<input id="email">
<br/>
<div id="formsecondhalf">
<label for="message">Message:</label>
<textarea id="message"></textarea>
</div>
<br />
<input type="submit" value="SEND">
</form>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use float:right instead of absolutely positioning the right area. And then wrap a div around the other fields, float that left, and then just clear it all.

    Example

    <html>
    <head>
        <style>
            body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;}

            #contactform {margin: 0 auto;overflow:auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;}
            #contactform .required:after{color:red;content:" *";}
            #contactform label {display:block;}
            #contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;}
            #contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;}

            @media (min-width: 800px) {
                #contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/}
                #formsecondhalf {float:right;}
                #formfirsthalf {float:left;}
                #contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;}
                #contactform input,textarea {width: 300px;min-width:300px;max-width:300px;}
            }

        </style>
    </head>
    <body>
        <div id="contactform">
            <div id="formfirsthalf">
                <form action="" method="post">
                    <label for="name" class="required">Name:</label>
                    <input id="name">
                    <br/>
                    <label for="email" class="required">Email:</label>
                    <input id="email">
                    <br/>
            </div>
            <div id="formsecondhalf">
                <label for="message">Message:</label>
                <textarea id="message"></textarea>
            </div>
            <br />
            <input type="submit" value="SEND">
                </form>
        </div>
    </body>
</html>
    • 0