Desperately in need of CSS floating help

I’m posting this in the unlikely event that there are humans out there who actually understand CSS.

See here. I want the div outlined in blue (#side_content, with the yellow and purple divs inside it) to be a column over on the right-hand side. I thought that if I placed it inside a container div (#main_content, red border, with the red, green and blue divs inside it) and floated it to the right, the other stuff in there would magically wrap around it. But alas, it is not to be. :frowning:

How can I make this do what I want?

Unfortunately, if you read the CSS RFCs, they are full of lines about how CSS can be used to “break the spirit of the organics”. One has a subsection that is just 30 kilobytes of the phrase “ha ha ha ha ha” followed by “they think ‘float’ will work for them!”.

It isn’t exactly clear to me what you want to do–do you want a two column layout like this or are you looking to wrap all of the page’s content around whatever’s in the little block thing to the right, more like this? Or something completely different?

Alex Osaki, you are totally my hero. The first one, with the two-column layout, is exactly what I wanted. Thanks!

I am now dissecting what you did in hope of enlightenment.

ETA: Oh my stars. It would have never occurred to me to put the floating content before the other stuff. No wonder my column kept wanting to fall off the bottom.

Cool–I’m glad I could be of help.

It may be that there is another way of getting CSS to break the right column out of the document flow regardless of where it is in the source code (I have in the past been known to use a lot of absolute positioning) but I believe that the simplest answers are usually the best ones (unless they are tables. People hate tables), particularly if that reorganisation isn’t problematic for you.

A great place to find CSS and HTML and well pretty much anything is

Dynamic Drive (Dot) Com

They helped me out a lot when I first started learning things. They also have ready made scripts as well.