Menu
What's the best approach to achieve the following effect?
[Image Removed by Poster]
I need that text to wrap around the image, which should always be in the bottom right corner. Thanks.
732
Enter . left { float: left; padding: 0 20px 20px 0;} to the stylesheet to use the CSS "float" property. (Use right to align the image to the right.) If you view your page in a browser, you'll see the image is aligned to the left side of the page and the text wraps around it.
Use the markup code <BR CLEAR=”left” /> to flow text around images on opposite sides of your Web pages. One of the first things you may want to do is place an image on the page.
Text Wrap Options This text wrap works best with images that have no background. Top and Bottom—Text stops when it hits the top of the image and continues at the bottom of the image; no text is to the left or right of the image. Behind text—Image is behind text.
Wrap text automaticallyOn the Home tab, in the Alignment group, click Wrap Text. (On Excel for desktop, you can also select the cell, and then press Alt + H + W.) Notes: Data in the cell wraps to fit the column width, so if you change the column width, data wrapping adjusts automatically.
you will not succeed on this with pure html/css but if javascript is an option for you might want to have a look at
102
Unfortunately you won't be able to get text to wrap around an image like in publishing software and your example above. What you can do is set the image to float to the right or align to the right and assign margin left to it which will pad the text off of it.
Live example here: http://jsfiddle.net/2bjn3/
24
Actually is is possible if you're not opposed to non-semantic markup. Take a look at this working example:
http://jsfiddle.net/chprpipr/Zhz2v/
If you set the background image of the container to contain your portrait image, you can get pretty close to what you're looking for.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
