Question

I’ve aligned the blond guy’s picture on the left with the text on the right.

But I can’t get the girl with the x-ray to align with text on the right (it’s currently below her).

How do you do this?

http://www.joaoalexandre.com/wordpressteste/clinica/corpo-clinico/

<p style="float: left;">IMAGE OF BLOND GUY</p>

<p style="float: right;">HIS QUALIFICATIONS</p>


<p style="float: left;">IMAGE OF X-RAY GIRL</p>

<p style="float: right;">HER QUALIFICATIONS</p>

Answer 1

Here’s a working example: http://jsfiddle.net/5LqUB/

Here’s the your code, modified:

<p style="float: left;">THE IMAGE</p>

<p style="float: right;">HIS QUALIFICATIONS</p>

<p style="clear:both ; float: left;">THE IMAGE</p>

<p style="float: right;">HER QUALIFICATIONS</p>​

See how I added clear:both to the third <p></p>? That forces it down to the next line and then floats the fourth <p></p> beside it.

I also added margin-bottom:20px to my image in the first paragraph just to put some space between the first and second rows.

It would be cleaner markup, though, to create CSS classes in an external stylesheet, like this:

.clear { clear:both }
.left { float:left }
.right { float:right }

and then have your HTML look like this:

<p class="left">THE IMAGE</p>

<p class="right">HIS QUALIFICATIONS</p>

<p class="clear left">THE IMAGE</p>

<p class="right">HER QUALIFICATIONS</p>​

Hope this helps!