2

I have this code: http://jsfiddle.net/5RbrL/

As you can see, the text doesn't go over the .box div. I would like to achieve the same, but the .box div should be attached to the bottom of the container.

First thing I tried was setting the container's positioning context to relative and making .box absolute, but this takes it out of the document's flow and text is placed underneath .box, which is exactly what I don't want to happen.

I do not know the height of the container, as it will depend on the amount of text inside it.

Is there any way to make the text fill the entire container, but leave the bottom right square empty (for a background graphic)?

[EDIT]

I apologise for not phrasing my question clearly: I would like the text to wrap around the .box.

mingos
  • 23,778
  • 12
  • 70
  • 107
  • This may have the solution (though I think it's javascript based) http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div – Brian Flanagan Mar 14 '11 at 16:02
  • Thanks for the suggestion, but the question you quote, unfortunately, contains no answer, only references, mostly agreeing to the fact that "it's a difficult question". The javascript-based solution is a dead link, so I've no means to check it out. – mingos Mar 14 '11 at 17:34

3 Answers3

0

Have you tried moving the image div to the bottom of the container (underneath your text) and then clearing the container with either a clear div or overflow:hidden? http://jsfiddle.net/5RbrL/14/

  • I think he wants the text to wrap around the box. – Brian Flanagan Mar 14 '11 at 16:00
  • It is exactly as @Brian suggests: I would like the text to wrap around the `.box` div :(. – mingos Mar 14 '11 at 17:27
  • I'm stumped then. The only way I can make it SEEM like it's there is to add another inline element after it, like another [another p tag](http://jsfiddle.net/5RbrL/83/) to fill in the space. All other positioning either removes it from the normal flow, or only [displaces it](http://jsfiddle.net/5RbrL/85/)... –  Mar 14 '11 at 18:35
  • Were it easy, I wouldn't ask :(. I'll probably end up asking the graphics gal for a different project :P – mingos Mar 15 '11 at 13:06
0

What exactly do you want to do? if do you want the box in the bottom, you can put an overflow hidden in the container, and then move the .box to the bottom > something like this >

http://jsfiddle.net/3v2mr/

or the structure can't changes?

eveevans
  • 4,392
  • 2
  • 31
  • 38
  • I don't mind the HTML structure change, but I also want the text to wrap around the `.box`. – mingos Mar 14 '11 at 17:28
0

Unfortunately what you ask can't be done with pure CSS.

You need a specific height to be able to float/position elements in this manner.

You could get around it be adding more elements, but this isn't preferable as then you'd have to invent some way to spread the last parts of text over to the empty element.

Well you could fake it by adding another element and somehow injecting the last lines of text into it.

Other than that, without a specific height I am not sure there is a real way to do it. HTML should come up with some kind of pathing system :D

__

After some thinking and experimentation I have an easier solution, just include the element within the text (inside the <p>.)

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • I'm not asking for a PURE CSS solution. I'm asking for any solution that works (at least on most machines) :) – mingos Mar 15 '11 at 12:35
  • Still not it. It can't be done procedurally, I still need to know WHERE to put the element in the text... – mingos Mar 15 '11 at 13:07