Dealing with nested floats in CSS?

December 19, 2008 12:08 PM

Care to help a CSS newbie with float-related positioning issues?

I'm trying to add a form to my WordPress site via the FormBuilder plugin, but the form jumps below the two floated sidebars rather than directly after the post text. FWIW, I'm using the Cordobo Green Park theme.

I've got FireBug installed and I've been attempting to determine what indeed is going on, but this problem exceeds my meager CSS skills.

I'm pretty sure that the 'clear:both' property is in here when it shouldn't be, but the form elements are floated-left, and I haven't found the proper combination

When I emailed the author of the FormBuilder plugin, I received this response:

"I've been looking at your site, and it seems to be related to a lot of quirkiness with your template system. The clear tags seem to be interfering with the display of the sidebars and affecting the content.

I tried messing around a bit with the CSS in firebug but wasn't able to get it to look quite right.

I suspect it might work better if you were able to put the comments div inside the entry div. Not sure though, just a thought."

posted by Wild_Eep to computers & internet (2 comments total)

I took a look, and am getting close to what you want. It looks like it's the individual labels and fields that are causing the problem. Each label and field are contained in their own little divs, and those buggers are causing most of your problems. I'm at work so I can't screw around for too long, but here's what I did:

- Using Firebug, take out "clear: both" from the form itself.
- Within the form itself, check the first div. It should have a class of "formBuilderField single_line_text_box".
- Disable "clear:both" for .formBuilderForm .formBuilderField. *zip!* The fields go up to between the sidebars.
- Disable "clear: left" and "margin-bottom: 10px" for .formBuilderForm .formBuilderLabel, .formBuilderForm .formBuilderLabelRequired

That should take care of most of your problems, if not all.
posted by curagea at 12:45 PM on December 19, 2008

A lot of people don't understand that, per the CSS specification, clear: moves a block down past all floated blocks on that side — not just those in the enclosing block. You can't clear just in the parent <div>. Here's an example that solves this problem using display: table-cell, but that's not supported by IE yet.

Just use a table for the sidebar layout, or don't use clear: in the content <div>.
posted by nicwolff at 9:09 PM on December 19, 2008