floats not pushing borders of divs?

[Duffman12]

See http://mikelambert.me/floatdiv.htm

So I'm trying to float an element to the right of a bunch of text on the screen. The float is making the text wrap, as expected. I have a border on the top of the titles, but the float isn't making the actual div smaller. Its just making the text in the div wrap. The title border-top is going right through the float.

How can I make the float make the div smaller so my title borders stop before the float?

The same problem is effecting the margin-right of the <p>'s (lorem).

[SB65]

Apply a margin-right to .title page equivalent to the width of the floated elements plus borders.

[Duffman12]

I've updated http://mikelambert.me/floatdiv.htm

Applying the margin-right will only work for the .titles that are next to the div. Look at the titles that are below the float, I want that one to go all the way across.

[SB65]

Well, a very simple solution would be to apply a background-colour to the floated div - but maybe that won't work with your design?

[Duffman12]

yeah, currently, the floated div has a separate background color than the regular background. So the title borders go all the way up to the floated div and stop. I want it to have some sort of margin.

That's a good idea though. If there really isn't a way to get the title divs to shrink, i can make the floated div the same color as the background, then embed a separate div inside the floated one and apply my styles to that. Kind of a hack, but it'll work...