Super Ragged Floats: Text Wrapping

Howdy,
Here is the site I am working on:

http://www.hellocutiepie.com/testingtheball/index.html

I am working off of this tutorial:
Super Ragged Floats (http://www.evolt.org/node/50410)

I have my image (in red) as a background image in the bottom right hand corner.

I then added the green divs on top of the background image.

I am trying to get my text to wrap around my divs and background image.

The background image divs, however, just sit below my text.

How can I get my text to wrap around the divs and background image?


Thanks,
PoJ

With regards to #flowing, you can’t put block-level elements inside inline elements. There’s also no need to declare floated elements as display: block since floated elements are automatically declared to be block-level.

That said, you need to kill the div element surrounding the “ragged floats” because it will be in the shape of a rectangle since, again, inline-level elements cannot contain block-level elements. To get the text to flow around the floats, you also need to move the floats into the same container as the paragraphs (#content) and somewhere besides the end (e.g., the beginning, but after #headingunderline).

There are un-related issues with your code efficiency as well. For example, you declared bottom: 0% and right: 0% yet those two properties do nothing if the element is not absolutely or relatively positioned. Another example: #headingunderline is being applied to a h1 element via a containing div; the container is not necessary and the ID would make more sense attached to the header element itself. The CSS is also using redundant and expanded declarations that would be better removed or condensed.