Question

I have a website that uses float/clear method for having a 3 columns design (2 asides -left and right- and the main article).

Both aside are floated (one left and the other one right), but I have to include a form automatically generated inside my article that has some clear:both included.
This results in the form appearing below the asides because of the clear.

Did I miss something? What can I do in this situation? It has been a while since I made a website, and I am stuck here.

Here is a minimalist code of my problem:

jsfiddle.net/89kpd/

I want the form content to be just below the "My Form" title.

What I could think of was to use display:inline-block inside the form instead:

jsfiddle.net/89kpd/2/

But it would require me to change the inner component, which I would prefer not to.

But maybe there’s a better way to design my site at the beginning, without using the float/clear method. I suppose it’s here that I should make something.
I don’t care about IE6 compatibility. For IE7, we’ll see, but probably not important…

Answer 1

Try floating the #main div to the left so that it float up between your other floated divs.

jsFiddle example

Add:

#main {
 float:left;   
}​

to your CSS