Adanialully
New Member
I've got this HTML form: \[code\]<form method="post" action="#" class="cf"> <div class="left"> <label for="first-name">First Name</label> <input type="text" name="first-name" placeholder="First Name" id="first-name" required /> <label for="last-name">Middle Name</label> <input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" /> <label for="last-name">Last Name</label> <input type="text" name="last-name" placeholder="Last Name" id="last-name" required /> </div> <div class="right"> <label for="details">Details</label> <textarea name="details" placeholder="Details" id="details" required></textarea> </div> <input type="submit" name="submit" value="http://stackoverflow.com/questions/14523319/Submit Form" /></form>\[/code\]And this is my CSS: \[code\]/* Clearfix */.cf:before,.cf:after { content: " "; display: table; }.cf:after { clear: both; }form > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.left { background: rgba(255, 0, 0, .2);}.right { background: rgba(0, 255, 0, .2);}form { background: #ccc;}input[type="text"],textarea { width: 100%; border: none;}input[type="text"] { margin-bottom: 10px;}label { display: inline-block; margin-bottom: 5px;}@media only screen and (min-width: 600px) { form { background: rgba(0, 0, 255, .3); } .left { float: left; width: 50%; } .right { float: right; width: 50%; } input[type="submit"] { clear: both; }}\[/code\]Fiddle
http://jsfiddle.net/gRRmh/Basically it's three text input fields, one textarea and one submit button (aka input type submit). When the breakpoint is reached, the form flows into a two column layout. That's the part that is working. The part that is not working is the height of the textarea. I want it to be the same height as the three input fields on the left.
Setting it to \[code\]height: 100%;\[/code\] does not work for two reasons:
(also with fiddle if you want, but please note: Its a bit messy. http://jsfiddle.net/mnBEh/1/)How to solve this problem?
http://jsfiddle.net/gRRmh/Basically it's three text input fields, one textarea and one submit button (aka input type submit). When the breakpoint is reached, the form flows into a two column layout. That's the part that is working. The part that is not working is the height of the textarea. I want it to be the same height as the three input fields on the left.
Setting it to \[code\]height: 100%;\[/code\] does not work for two reasons:
- The height of the label needs to be taken into account. Sure I could just give it a height in percentages and subtract that value from the textarea's height (10% / 90%) ...
- ...but for this to work, one parent elements needs a fixed height, so I need to give the form e.g. a height of 200px. The problem with that is I actually need to match the height of the left column by hand which isn't really a good solution.