Form breakes tight CSS layout

The <form> tag breaks a tight layout.

It seems that a <form> will override "inline" for any CSS style and change it to "block". I even tried to nest two <div> CSS tags in order to contain the form. Not good enough.

You can see my effort at http://www.spoxdesign.com/test2/form.html

This layout is broken because the form is always displayed on a separate line. The form should appear on the same line as the buttons and the text.

This layout was originally successfully done with normal tables and a simple hack to prevent whitespace. You will see the original layout if you click on any button in the above url.

What mistake am I making? How can I refactor this layout using CSS?

Afaik you have to use tables to get the form on the same line, but then still there will be problems because of the height of the form. The only work around I could think of is a JavaScript function and a form somewhere else on the page with a hidden file, which gets submitted when somebody selects something in your select box.

If you don't like that, just say so in your stylesheet:


Some additional remarks:
-there are two divs with an id 'menutop'; id's should be unique;
-you use a strict DTD, but it doesn't validate as such.. you may check with: http://validator.w3.org

Hope this helps,
Jeroen

Thanks, Jerom!

Actually after posting my question I got up from my computer and I went swimming... and of course, within an hour it dawned upon me "why the hell did I not try to modify the <form> tag?"

So in conclusion it always helps to stop working and have some fun.

Thanks again!