How to clear correcly for this design?

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: http://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: http://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...

Answers


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


Apparently, the entire thing needs to be 500px wide. Try this HTML:

<div id="blue">
    <aside id="black"></aside>
    <article id="main">
        <h2 class="center">My Form:</h2>
        <div class="row">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" />
        </div>
        <div class="row">
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" />
        </div>
    </article>
    <aside id="red"></aside>
    <br clear="all" />
</div>
<br clear="all" />

CSS:

#blue{background:blue; width: 500px; height: 600px; color:white;}

#black{float:left; background:black; width: 120px; height: 345px; float: left;}

#red{float:left; background:red; width: 120px; height: 345px; float:right;}

#main{float:left;width:260px;}

label { float:left; width:100px; }

input { float:left; width: 150px; color:black; }

.row { clear: both; }

h2 { font-size:20px; text-align:center; }

Need Your Help

Close DBCP connection on application exit

java oracle apache-commons-dbcp jdbc-pool

In out app we use Apache DBCP connector for Oracle DB. But every 30 or 40 minutes we get connection size leak error.

Enthought Canopy 1.0 missing Python.h and other includes

python-2.7 build enthought setup.py canopy

I installed the Canopy distribution from Enthought for Mac OSX 64 bit and the include/python-2.7 folder is missing.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.