<img class="photo" other attributes...>
.photo { background-color:#fafbfc; border:1px solid #b0b0b0; margin:0 0 10px 10px; padding:5px; } .phototoright { border: 5px solid #b0b0b0; margin: 5px 6px 15px 6px; } .phototoleft { border : 5px solid #b0b0b0; float : left; margin : 5px 15px 6px 15 px; }
div#photoflot p{ margin:0; padding:0; text-align:justify; } div#photoflot img{ float:left; background-color:#fafbfc; border:1px solid #b0b0b0; margin:0 0 10px 10px; padding:5px; } hr{ clear:left; }
<div id="photoflot"><img attributs...> <p>Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien...</p> </div>
/* To frame an image with the text on the right */ .rightimg, .leftimg, .centreimg img { border:1px solid #AAAAAA; background-color:#E9E9E9; padding:3px; margin:6px; } .rightimg {float:right;} .leftimg {float:left;} div.centreimg { text-align:center; }
<img class="rightimg" attributs...>Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis...
DON'T MISS