Align two images with text [closed] - html

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I want to align the two pictures at the top of this site http://paulcwebster.com
with the text beside them.
So far, I was able to align two images beside each other, but I have the problem of:
1) The text not having any space between the images.
2) The text being too short or too long for the images on different browsers.
3) Not having the text size match the site of the pictures
4) Not being able to move the text "Recent Publications" to the left after (I've triend align="left" and putting it in it's own div)
Here is my code:
<div >
<img src="gfx/FrontImage1.jpg" width="180" height="180" alt="Image1" style="float:left">
<img src="gfx/FrontImage3.jpg" width="180" height="180" alt="Image2" style="float:left">
<span ><p>Paul Christopher Webster is a freelance writer and documentary film director based in Toronto, Canada. He has reported from 20 countries since 1992.</p>
Paul's work in film has appeared on the Arte, BBC, CBC, Deutsche Welle, Discovery, National Geographic, Slice, SWR and Vision Television networks. His work as a writer has been published in dozens of magazines, journals and newspapers across Canada, the U.S, and Europe. </p>
<p>He has won four national magazine awards for his writing, and Tier One Journalism Award from the Canadian Institutes of Health Research. His work on documentary films has garnered awards from the Canadian Association of Journalists, Hot Docs, the Canadian Academy of Film and Television, and PARISCIENCE, the international festival of scientific films.
<p>Paul’s work focuses on themes in business, science, and politics. For samples of his work in these categories, please click on the links to articles below.
</span>
</div>

Answer 1

First, I recommend restructuring your HTML markup. Put a <div> or other block-level element around each of the elements you want to control. Something like this:
<div class="container">
<div class="photos">
<img src="gfx/FrontImage1.jpg" width="180" height="180" alt="Image1">
<img src="gfx/FrontImage3.jpg" width="180" height="180" alt="Image2">
</div>
<div class="text">
Your text goes here...
</div>
</div>
Then, write some CSS to control these elements the way you want:
.container {
overflow:hidden; // this keeps the floated objects inside the container
padding:5px;
border:solid 1px black;
}
.container .photos {
float:left;
margin-right:10px; // this puts some padding to the right of the photos
}
I am assuming here that you know how to include a stylesheet to apply the above CSS to your page. This should solve problems 1) and 4). There really isn't any way to ensure that the size of the text always matches the height of the images, as it can flow and change, depending on the width of the browser, and the font size that the viewer is using, so I don't see a way to solve problems 2) and 3).
Note: I see that you are using a <span> element to contain your <p> elements. This is invalid markup, since a <span> is an inline element, and a <p> is a block level element. Inline elements cannot contain block level elements.