float flow question

[The Admiral]

Hello all,

My question pertains to elements that flow around a floated element.
On this page, http://staging.assetinternational.com/development/moneyGameBlogLanding.html, the middle section has an ad that is floated to the left. I would like to make it so that when the "story title" blurbs flow around the ad, the entire div(date, title, and paragraph) stays intact. Please ignore the weird code that floats some of the blurbs to the right. All of the blurb divs will eventually have the same class and no specific width.
Essentially, I want to say to the blurb div, "If you can’t fit all of yourself to the right of the floated element, put all of yourself below the floated element".
Is this kind of maintaining of a div’s integrity achieveable with html and css alone?
Thanks for any input anyone may have on this.

[AshtonSanders]

This is what I would try:

1) DELETE the div.content-box-latest-new-ad1-listing-wrapper-adblock-right from the HTML
2) For .content-box-latest-new-ad1-listing-right : remove the width and make then float left

That should work for you. Obviously with this, since you’re "keeping everything together" there will normally be some white space below the advertisement when the stories get too long. It shouldn’t be very bad.

Btw, holly cow. Why the epically long class names? KISS.

[The Admiral]

Thanks for the input, Ashton.

I actually did try what you described already. It resulted in white space not below the ad image, but to the right of it, as the divs that are floated left were too wide to stay beside the ad and ended up below it. This page is going to be updated regularly through a CMS, so I’d like to give all the blurb divs the same class ( "content-box-latest-new-ad1-listing" as opposed to some of them having the "-right" tacked on the end). The main thing for me, though, is to keep each individual blurb div intact as they all flow around the ad image, and to avoid any white space. Take a look at this screenshot (sorry I don’t have this up live yet). [attachment=0]brokenDiv.png[/attachment] This scenario, where the last div in the flow gets broken up is what I’d like to not have to worry about.

BTW, I know exactly what you mean about the epic length of the class names, but I inherited this html from someone else and I’m not allowed to change it too much as it’s already been incorporated into a .net framework. :roll:

Any further input on this issue is much appreciated!

[Author]

Posts