cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Surveyor II

Vertically aligning an image and a long text using div

Jump to solution

Hi!

Can someone guide me on how can I vertically align an image and a long text using <div> like the image below? TIA.

canvas_help_div.png

0 Kudos
1 Solution

Accepted Solutions
Highlighted
Navigator

Nancy Keefer was kind enough to teach me this:

<h4>This is the Headline</h4> <p><strong>This is a bold second headline:</strong></p> <div style="float: left; width: 25%;"> <p>First line in the left column</p> <p>Second line in the left column</p> <p>Etc.</p> </div> <div style="float: right; width: 75%;"> <p>First line in the right column</p> <p>Second line in the right column</p> <p>Etc.</p> </div>

Since you want to alternate the side on which a comparatively small image can be found you might want to play with the percents on the widths.  Just use that entire code for one image, and repeat it entirely for the next image. 

View solution in original post

0 Kudos
2 Replies
Highlighted
Navigator

Nancy Keefer was kind enough to teach me this:

<h4>This is the Headline</h4> <p><strong>This is a bold second headline:</strong></p> <div style="float: left; width: 25%;"> <p>First line in the left column</p> <p>Second line in the left column</p> <p>Etc.</p> </div> <div style="float: right; width: 75%;"> <p>First line in the right column</p> <p>Second line in the right column</p> <p>Etc.</p> </div>

Since you want to alternate the side on which a comparatively small image can be found you might want to play with the percents on the widths.  Just use that entire code for one image, and repeat it entirely for the next image. 

View solution in original post

0 Kudos
Highlighted
Surveyor II

Thank you very much Steven_S! This is a big help!

0 Kudos
Top Kudoed Authors
Labels