Search code examples
cssliquid-layout

Text wrap around image where image comes last in source. Liquid layout

I have an image that I want wrap text around it. eg

ttttttt|image|    
ttttttt|     |
tttttttttttttt
tttttttttttttt

This would be easy if the image was before the text in the source code. However, I need the image to come after the text like this:

text text text text text text text text text text text text text text text text IMAGE

I don't know the image dimensions or how wide the text will be (as the layout is liquid)

I don't want to use JS

Much appreciated

Solution

  • just a note for another way to do this...

    As long as you are happy for the image to be first in the source (so that it can be floated) you can use display:table-caption to flip the source on small screens where the image isn't floated so

    LARGE SCREEN

    img{
float:left;
}

    SMALL SCREEN

    .container{
display:table;
caption-side: bottom;
}

img{
float:none;
display: table-caption;
}

    Hope that helps someone trying to do something similar. If that's not obvious send me a note and I'll stick some code up.