Question on "sandbag" DIVs

[TheDust]

I'm familiar with using "sandbag" DIV tags to wrap text around an image (see

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm).

However, with a new site I'm building, I'm running into a problem and wanted to see if any CSS experts may have an answer.

I'm trying to do the sandbagging trick, but the DIVs need to be at the bottom of the frame instead of the top (how they are laid out as default). Click here to see what I'm trying to do:

http://chicagoproducers.net/test/test.htm

The green DIV is showing up in the location I would like it, but the text doesn't wrap around it. Instead, it takes up blank space at the top of the document where the DIV sits initially until it reads the CSS of "position:relative; bottom:-300px".

You can see there's a curve near the bottom of the design, and I'm just trying to include some empty DIVs in the template to wrap around that part of the background image. Anyone have an idea how this might be accomplished? Thanks in advance to anyone who can offer advice...

 

[taylorantone]

Here's something you could try, adding the style properties to the CSS document however instead of putting them into the page code.

Rather than adding a single DIV to try to sandbag and forcing it to the bottom, try putting the sandbags all the way down the left side. In your code, take out the sandbag div and add the following right before your paragraph in the td:

<div style="float: left; clear: left; border: 1px solid black; width: 1px; height: 270px;"></div>
<div style="float: left; clear: left; border: 1px solid black; width: 10px; height: 10px;"></div>
<div style="float: left; clear: left; border: 1px solid black; width: 30px; height: 10px;"></div>
<div style="float: left; clear: left; border: 1px solid black; width: 50px; height: 10px;"></div>
text text text text text text text text text text text text text text text text text text text text text text

You'll have to play with the CSS document and the box model hack to get the alignment right in both IE and Mozilla (among other browsers) but it works. The border is there so you can see what they're doing.

Hope this helps. I'm certainly no expert, but this is the one thing that I found that works every time.