How do I get the following two photos to line up side by side, but centered on the page?
I am fairly new to Web development, but here’s a try at using your table structure to display your images. I had to change the markup to remove the deprecated tags and attributes that your original code contained because I don’t want to practice any bad habits. Here’s what I came up with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align: center;
margin: 0px;
padding: 0px;
}
table {
margin-right: auto;
margin-left: auto;
}
.image {
height: 325px;
width: 500px;
border: 4px solid #000;
}
.caption p {
font-weight: bold;
margin-top: 0px;
}
h2 {
color: #8A360F;
}
</style>
</head>
<body>
<h1>Just couple of reasons we go to France every year......</h1>
<table>
<tr>
<td class="image"><img src="images/Sardines.jpg" alt="Sardines, Bordeaux"></td>
<td class="image"><img src="images/Meat.jpg" alt="Mid-day in Paris"></td>
</tr>
<tr>
<td class="caption"><p>Sardines in Bordeaux</p></td>
<td class="caption"><p>Lunch in Paris</p></td>
</tr>
</table>
<h2>************</h2>
</body>
</html>
Hope this helps. I’m sure there will be other comments about using tables instead of divs and css positioning, but the table structure seems to be the simplest way of doing what you are trying to do.
Tried your suggestions, but the right photo still runs off the screen. I do not have a right margin. Perhaps I am doing something wrong, and if so I apologize. I copied both suggestions, and when sampled I pretty much got the same results.
I feel certain my answer is very simple…I just have to find it. Guess that’s part of the fun and the learning experience. If anyone else has a suggestion let me know. You folks have taught me a lot.
Part of the reason that your pictures don’t fit on the screen without a horizontal scroll bar on lower-resolution monitors probably has to do with their width.
Based on the code in your original post, each of them are 500px wide.
Any monitor with a resolution that has a width lower than 1032px will show a horizontal scrollbar when viewing two images of that size side-by-side. (That’s not counting any horizontal paddings or margins you have applied within the page, which would also need to be accounted for) A large portion of the Internet browsing population does have a resolution with a width that’s lower than that. For example, 1024x768 and 800x600.
No matter what HTML/CSS techniques you implement, this issue will persist.
My suggestion is to resize each of images to have a width no larger than 384px. (again, not counting and horizontal padding or margins) Alternatively, you could stack the images one above the other and leave them at the current size.
No matter what you do, I should mention that there is absolutely no reason to be using a table to position these images to your liking. Tables are for tabular data and not for the positioning or layout of elements such as images.
I was in a rush, I started with the original table, tied myself in knots trying to get it to work but my knowledge of the intricaciies of tables is limited
The origina problem was solved. I appeciate that it is simpler to not use tables but thought that there may be further code within the table.
Anyway it works, is scalable although not proud of the bloated solution
I understand. Sometimes “whatever works” is the solution.
@Barnum: It should be noted that this can be achieved without the non-semantic use of a table. If you are interested just reply back and let me know and I’ll get you a proper rewrite as soon as I get a chance.
