I'm trying to get my contact form to not spill its contents out of the parent div when I resize the viewport. How can I go about doing this? I have used float clearing to prevent this as I understood it was supposed to be used, but it isn't working.
What should I do to fix this?
here is the page in question.
also I have a similar problem with the header.. the menu drops below the header text if I make the browser window smaller.
Thanks for any help you all have to offer.
On quick look, I would do either of these two things in your case:
Option 1:
Set a "min-width" for the #contact container. This would prevent it from becoming smaller than the table inside it when re-sized, but keep it's fluidity.
Option 2: Remove any floats from the form table and ensure that the table has a "min-width" or any fixed width. Given that you're using a table-cell approach (which I personally also like for forms), there shouldn't be a need to float any table elements. The resizing of the parent container would then stop at the form fields.
Hope that helps.