How Do I Make The Image Appear To the Left of the Text in an HTML Template?
Learn how to make your image appear to the left of your text in your HTML templates. To do this you just need to edit two areas of your template. We have attached a Blog template that uses this technique which you can download and install to your templates folder.
Example
This is what your HTML template would look like after completing this tutorial. Notice that the image appears to the left and the text for each step wraps around the image.
In this example we are going to add the CSS inline for the template. Open your ScreenSteps template and edit the [-- START MEDIA:IMAGE --] block. In the style attribute for the StepImage div add:
margin: 0px 10px 10px 0;
float: left;
This will make the image float to the left of the text. The text will wrap around the image.
Fix Float Wrapping Issues
If you have a step that just has an image with no text you could end up with some funny display issues where steps would appear next to each other. To fix this add a new div right after the %MEDIA:IMAGE% %STEP_INSTRUCTIONS% line:
<div style="clear:both";></div>
Add your comment