I have 2 floated divs, one on the left, the other on the right, the left floated div has a form in it with input fields. However, i find that when i resize the page, the floated divs shrinks, but the form does not shrink with it, and in turn expands OUTSIDE of its floated parent, i have tried setting max height to form, all the parents have specific heights, but it does not seem to be working. Any suggestions?
<div class="12u formside">
<form id="ideaform">
<div class="row 50%">
<div class="6u">
<input type="text" name="ideaname" id="name" placeholder="Give Your Idea A Title"/>
</div>
<div class="6u 12u(3)">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
</div>
<div class="row 50%">
<div class="12u">
<input type="text" name="subject" id="subject" value="" placeholder="Video Link" />
</div>
</div>
<div class="row 50%">
<div class="12u">
<select id="select" name="select2">
<option selected disabled>Choose The Category Your Idea Falls Under</option>
<option value="science">Technology (E.G Code, Engineering)</option>
<option value="business">Business</option>
<option value="community">Community Related</option>
<option value="sports">Sports</option>
<option value="environment">Environment</option>
<option value="food">Food</option>
<option value="others">Others</option>
</select>
</div>
</div>
<div class="row 50%">
<div class="12u">
<textarea maxlength="200" name="message" id="message" placeholder="Give a Short Descrition of Your Idea" rows="6"></textarea>
</div>
</div>
</form>
</div>
<div class="12u fileside">
</div>
</section>
I have tried using overflow hidden but that will hide the form fields.
As you can see, when screen is minimized, the form expands beyond its parent, intruding into bottom div.