html - How can I wrap text around a bottom-right div? -


Every time I try to simplify the CSS-it does not work.

I have a content div that has a 460x160 image. All I want to do is keep the image at the bottom-right corner and wrap my text around it.

  & lt; Div id = "content" & gt; & Lt; Img src = "..." /> Lesson Text Text Text ... & lt; / Div & gt;  

So I want to see it:

  ------------------ | Text lesson | | Text lesson | | Text lesson ----- | | Text lesson | | ------------------  

It is a cake to do with a top-left or upper-right image:

  #contents img {Float: Correct; } ------------------ | Text lesson | | | Text lesson ----- | | Text lesson | | Text lesson | ------------------  

Now how can I push it down? The best I've come with so far:

  #contents img {float: right; Margin-top: 90%} // in fact 100% -160px ------------------ | | Text lesson | | Text lesson | | Text lesson ----- | | Text lesson | | ------------------  

In this case the text does not print in the margin, hence the white space is above the image

#contents {status: relative; } #contents img {status: complete; Correct: 0; Bottom: 0; } -a- // img tag in HTML under text and: #contents img {float: right; Margin top: -160; } ------------------ | Text lesson | | Text lesson | | Text lesson ----- | | Text lesson | They | ------------------

In this case the text prints above or below the image.

How can this accomplish this?

It has definitely been said, and, or

the last link is actually Gives a suggestion, but for a definite (i.e. non-fluid) solution.

This is consistent though

The only way to do this is to put elements positioned somewhere in the middle of the text. It is impossible to correct all this time.

or:

There is a vertical "pusher" element (like IMG, but it's probably clever to use a blank box) Then using the obvious property, the desired object floats under it. The problem with this method is that you should still know how many lines of text are there. It makes things very easy, and can definitely be coded with javascript, just the height of the "Pusher" needs to be reduced to the height of the container (assuming that your container is fixed / Not the minimum height).

Anyway, as there is no easy solution ...


is mentioned in this comment, which once again says that it is easy Can not be acquired from.
However, it mentions it, which comes close to the effect you get.

How the floats and normal flows are related to each other, and clearing by understanding can be used to manipulate the normal flow around the float, the authors can be very powerful Float can be employed as a layout tool.
Because the floats were not originally used for layout, some hexs may be essential for their intentions, floating elements may include float, "clearing" element, or a combination of both Includes.


Comments