"Postit note" style boxes, that wrap, within a div.

[sprockett]

Hi, I have a 2 column layout, the right column is a floating side bar used for navigation.

The left column is non floating, and houses content.

In the content area (left column) I use divs to "border" up content of different topics.

They lie vertically on top of each other.

Here is my problem: I intend to create a bordered div that holds little boxes, each of which will have a chunk of text. Basically kinda like little postit notes, which wrap accordingly, within the div, as i resize my browser. Each box is of fixed width and height.

I managed to to do this by making the "noteboxes" float: left. This allows them to wrap properly.

However, if the noteboxes wrap onto a vertical point that is past the the bottom of the right floating sidebar, it spills out over the containing div.
This only occurs in IE.

In FF, the div contains the floating postit note box elements properly.

Any solution how i can solve this?

kindly check out:

[old.rathernifty.com...]

PS: Also, the text boxes expand to contain content in IE, but not in FF (when there exists a really long word, the world spills out), any solution around this?

PPS: i'll gladly reward anyone who helps me fix my css with a token sum of $$.

[garann]

It's kind of hard to know without seeing the HTML or CSS (not supposed to post personal URLs here, by the way), but maybe these suggestions will help you.

To keep the noteboxes from overflowing their container, you could add

<br style="clear:both;">

to the container as the last element within it. Setting the noteboxes to

position:relative;

might help, too. As for your text spilling out, do you have another element inside the noteboxes? Like a <p>? If so, setting

position:relative;

on it, as well, might be a good start.