BuddyPress.org

For #sidebar, add {float:right}.

For the second #container, add {float: left; width: 57%;}

Forget the sidebar CSS I wrote above.

Try just adding {float: left; width: 57%;} to only the second #container and not both.

“Another thing I want to point in general. If a theme has .fix or .clearfix all over it. Then run the other way”

*puzzled*

Qualify that statement!

It’s somewhat misleading. In clearing floated elements it is necessary to employ a variety of techniques to accomplish this as each suites a different set of conditions met.

The .clearfix set of rulesets you refer to is a well worn and tested method , first devised by Tony Asslet over at CSSCreator, improved a tweaked by many of us over the years. It is , in certain circumstances, the best method to clearing floated containers.

What has me running a mile is seeing empty div elements with class=”clear” used to effect clearing as it’s both unnecessary and wrong to write empty elements and use them in this way, and it bores me to tears having to route through template files finding them all and deleting them with fury

@Duvy

Looking at your layout shows some critical issues. You describe an element twice and give it the ID #container. ID’s are unique tokens that are only allowed to be used once per page and as such are generally applied to major markup framework structures #container is one such framework element that generally would occur once along with IDs such as #wrapper. It is an error for it to be used twice and that needs to be addressed first. If that element really does need to appear as a parent of #content you could change it to a class but better is to rename it altogether (second occurrence) However neither of these elements appear to have any rules associated with them so I wonder if things are not getting slightly mixed up here?

#content has the property clear:both this will (and does) have the effect of clearing any previous floated elements or columns and is why it positions itself below what appear to be your sidebars, also it’s full width; in a basic three column layout you would need to add margins left and right equal to the sidebar widths doing both these things will pull that #content area up to the top, but the right sidebar will remain cleared below as it’s a floated element and follows after non floated content and must drop to the next available line and would require source ordering tricks to enable it to take position alongside #content.

tbh at this stage I would be suggesting that you step back and revert to the previous styles as this feels as though it’s got a little out of hand and it’s difficult to correct in it’s present state. Start afresh and work through changes carefully perhaps seeking advice as you go. One of the difficulties is that without knowing for sure what the layout is supposed to look like or looked like before and what actual changes have been effected it’s hard to offer advice.

Thats what I said

First glance at this and the HTML seems wrong and might be difficult to fix with CSS.