Floating a DIV and wrapping text around it?

[suklee]

I have to insert Featured Resources before the red "1" and want it floated to the right, and pushed down slightly. I also want the text to wrap above and below it.

http://img402.imageshack.us/i/screenshot20110310at550.jpg/

 

[Tweak155]

Can you use something like paint just to throw on there what you want it to look like?

There are actually float functions such as float:right; but possibly the position function would work better in this situation.

Something like:

<div style="position:relative; top:10px; right:10px;">Featured Resources</div>
This pushes it down 10 px and to the right 10px. If you want to move it up, then you just do top:-10px;

 

[suklee]

Yup, there is a link to a mockup above but figured out how to embed it below.

I've tried as you suggested but the white space above is not filled it by text.

If I use position: absolute I can also move it to the correct position but the surrounding text does not wrap around the div.

 

[Aluvus]

You just need to use float:right and perhaps display:block

In the markup, the div should come before the paragraph you want it to be to the right of.

Here's a live example: http://arstechnica.com/tech-policy/...m-tracked-anonymousand-paid-a-heavy-price.ars

 

[suklee]

In the markup, the div should come before the paragraph you want it to be to the right of.

This is the main issue - because the page content is from a CMS, I can only insert the block at the beginning or end of the content. I can't actually place it at specific paragraphs in the middle...

 

[Tweak155]

Quite frankly I still don't get what you want it to look like. Is that picture you posted what it SHOULD look like or what it looks like now? Because your written description of what you want it to look like doesn't match the picture.

 

[Kr@n]

AFAIK, you *cannot* achieve what you want if the floating element is not defined directly above the concerned paragraph.

I just tried with the float at the beginning of the document (and with a positive top margin) and the whole space above the space (the said margin) is left blank. I also tried with the float at the bottom and a negative margin, but the text keeps wrapping around the position the float would be without the margin (same thing if you use a position: relative).

The only way I can imagine now, is some scripting to move the float at the wanted position in the DOM, but that is a whole another story (and would only work with JavaScript allowed).


Note : a "float: left/right" CSS rule implicitly defines a block bounding box. There is no need to specify "display: block" (it can even be helpful to specify "display: inline; position: relative;" to circumvent some IE6/IE7 margin bugs on floats, even if it should have no effect at all)

EDIT : I think you can achieve what you want with the CSS3 Layout Module. Unfortunately, very few browsers are compatibles at this point (FF4 & WebKit browsers maybe ?)