i from about to flood York, UK 
On this page:
Extra text sits under the square images. I dont want this to happen. I’d like extra text to sit right of the image instaed of getting pushed under the square images.
Below illustrates my pain:
I now this has something to do with class=“top-image-text”. I am wondering if i should float the square images but just for additional clarification below is what I’m trying to achieve:
Any insights welcome
Images are inline elements and when you place them on a single line they act just like text (imagine a big character) and you wulkd not expect small letters to line up alongside bigger letters. They are all placed on the same line.
If you want text to wrap around an image (or any other element) then you need to float that element. In your code that would be something like this:
.table li{clear:both}
.table li:after{
content:"";
clear:both;
display:table;
}
img.top-image-text{
float:left;
clear:left;
margin:0 10px 20px 0;
}
Of course this means that you need to contain and clear your floats appropriately hence the extra code above.
@PaulOB Grazie mille Paul your solution worked a treat 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.