# Desperately in need of CSS floating help

**URL:** https://boards.straightdope.com/t/desperately-in-need-of-css-floating-help/499690
**Category:** Factual Questions
**Created:** [June 13, 2009, 9:10pm UTC](https://boards.straightdope.com/t/desperately-in-need-of-css-floating-help/499690 "2009-06-13T21:10:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)
#### Post date: [June 13, 2009, 9:10pm UTC](https://boards.straightdope.com/t/desperately-in-need-of-css-floating-help/499690/1 "2009-06-13T21:10:08Z")

</div>

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

See [here](http://www.friedo.com/testlayout.html). 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. ☹

How can I make this do what I want?

---

<div class="post-metadata">

### Author: ![DETXL](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/detxl/32/19366_2.png) [@DETXL](https://boards.straightdope.com/u/DETXL)
#### Post date: [June 13, 2009, 10:07pm UTC](https://boards.straightdope.com/t/desperately-in-need-of-css-floating-help/499690/2 "2009-06-13T22:07:27Z")

</div>

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](http://www.collie.su/friedo.html) 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](http://www.collie.su/friedo_2.html)? Or something completely different?

---

<div class="post-metadata">

### Author: ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)
#### Post date: [June 13, 2009, 10:43pm UTC](https://boards.straightdope.com/t/desperately-in-need-of-css-floating-help/499690/3 "2009-06-13T22:43:24Z")

</div>

**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.

---

<div class="post-metadata">

### Author: ![DETXL](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/detxl/32/19366_2.png) [@DETXL](https://boards.straightdope.com/u/DETXL)
#### Post date: [June 13, 2009, 10:57pm UTC](https://boards.straightdope.com/t/desperately-in-need-of-css-floating-help/499690/4 "2009-06-13T22:57:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Markxxx](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@Markxxx](https://boards.straightdope.com/u/Markxxx)
#### Post date: [June 14, 2009, 1:59am UTC](https://boards.straightdope.com/t/desperately-in-need-of-css-floating-help/499690/5 "2009-06-14T01:59:37Z")

</div>

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

[Dynamic Drive (Dot) Com](http://www.dynamicdrive.com/)

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