Pushing Out With a Float

[buddybuddha]

I have a page that I am working on for school:

http://www.buddybuddha.net/counsel/home.html

The problem, as you may quickly notice, is the the column on the left is not pushing the content box out like I would like it to. This is obviously because the box is a float. I know that's the way it supposed to look according to the code, but how can I make it so it does push the box out?

[Ed Seedhouse]

The problem, as you may quickly notice, is the the column on the left is not pushing the content box out like I would like it to. This is obviously because the box is a float. I know that's the way it supposed to look according to the code, but how can I make it so it does push the box out?

Well you can't, but is that your real problem? Floated elements are removed from the flow, so all external elements, including their wrappers, are supposed to ignore them. That's just the way CSS is specified.

You could float your content left as well, as long as there is enough space left on the page to contain it on the same level.

The usual solution is simply to give a margin-left to the right column that is sufficient to clear the floated element. That way the unpositioned right column will expand to fill the remaining width. Of course should your floated element grow wider you'd have to adjust the margin accordingly.

But a look at your code shows perhaps the worst case of "divitis" and unsemantic code I've seen in awhile. It doesn't need to be anywhere near that complicated. You shouldn't be using a transitional doctype. Your code has many validation errors. CSS is designed to work with valid html and you can't expect anything particular from any given CSS rule unless the code it applies to is valid html or xhtml.

My advice is to do some research, tear it all down, and start it over the right way. You'll end up saving a lot of time and having a much better page.

[phyrex1an]

Adding a <div style="clear:both;"></div> at the end of the wrapper solves this particularly problem. But it kind of defeats the whole purpose with css...