I know that it’s easy enough to wrap text around images by placing the image right or left and then placing text after it, but what I want to do is wrap other elements around it, such as a div.
I tried setting my div to a string, and it worked fine, however, as soon as I added other divs inside this div, it still looked fine, but when I looked at it in Firebug, there is a blue line showing the element you are hovering over was also expanded over the image, and when I tried to add an addition to the div container, this did not work, and you could see that this happened because the addition was added at the end.
In the end, I got it so that it looked normal, but added registration to the image, but still does not seem to be the right way, because he does not like Firebug, and I'm worried about compatibility issues.
Here is an image of what I'm trying to do. The gray area is where I want the text / elements to wrap and the brown to be the image.
Here is an example code: (This example is not a wrapper version)
<div class="main"> <img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" /> <div class="details"> <div class="about"> <div class="title"> About: </div> <div class="info"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="contentClear"></div> </div>
CSS example:
#content .wrapper .left .main { padding-top: 20px; width: 550px; } #content .wrapper .left .main .screenshot { float: right; border: 1px solid #c0c0c0; width: 275px; } #content .wrapper .left .main .details { width: 263px; padding-right: 10px; } #content .wrapper .left .main .details .title { color: #0F5688; font-size: 1.8em; font-family: arial; font-weight: bold; } #content .wrapper .left .main .details .info { margin-top: 6px; font-size: 1.3em; font-family: Arial; color: #636363; line-height: 1.6; }
Here is an image showing a problem with FireBug (from the JSFiddle example), since I say that it looks good in the browser, but, seeing that the Firebug panel extends completely to the image, I was worried that it might cause problems ..
