CSS based form, 2 column layout

using the art and Science of CSS as my guide, I created a contact form which i have used successfully in a couple of sites.

I am now attempting to do the same, but with a 2 column fixed layout.

Using my settings from before, i have added the form to my page.

When viewed in IE8, it looks OK, but in FF, the form fields drop down the page.

Can someone please give me a few pointers ?

Regards

(very much in early development, page can be found at samples.stonepits.com/contact.php)

Hi,

You have set the fieldset to clear both so it does what you asked it and clears your floated left column.

In a fixed width two column layout you should simply float both columns (instead of using the margin-left technique) with appropriate widths and avoid this issue as clearing of elements inside a float is confined to that parent only and has no effect outside.

This demo explains the issues in more details.

Either float both columns or instead nest an inner element inside the content section that is floated and will contain all that right side content. (Or use overflow hidden on #content and apply haslayout.)

The two column float is the most robust solution:)

Cheers Paul, I will take a look at this