Multiple Rows with Floated Images

You will need a clear float on a “block level” elements. This is an element that spans the entire width of the page, such as <div> or <hr> tags. See Drupal specific instructions.

Desired Layout Example

two images in a column with text floated to the right

Example Code with <div> tag:

<img src=”first_image.jpg” style=”float:left” alt=”description of image” />

<p>paragraph text that will float next to the image.</p>

<div style=”clear: both” >

<img src=”second_image.jpg” style=”float:left” alt=”description of image” />

<p>Paragraph and other text elements that will float next to the second image.</p>

</div>

Example Code with <hr /> tag:

<img src=”first_image.jpg” style=”float:left” alt=”description of image” />

<p>Paragraph and other text elements that will float next to the image.</p>

<hr┬ástyle=”clear: both” />

<img src=”second_image.jpg” style=”float:left” alt=”description of image” />

<p>Paragraph text that will float next to the second image.</p>

Achievements & Updates

Announcements, tips for a successful website and analysis reports of trends and visitor data.
College of Fine Arts WordPress Instruction
College of Fine Arts Drupal Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu


To view some links on this page you may need to download Acrobat Reader.