Tested in IE 6 and this was the result?

HTML & CSS
1

When I tested my client’s web page in Internet Explorer 6, this was the result. The bottom photo is suppose to be to the right of the other photos. Could someone please tell me how I can fix this? Thanks in advance.

My HTML - Doctype XHTML 1.0 Strict:

<div id="photosWrapper">
			<div id="photosLeft">				
				<p><img alt="photo1" height="212" src="images/photo1.jpg" width="318" /></p>
				
				<p><img alt="photo2" height="212" src="images/photo2.jpg" width="318" /></p>
			</div>
			
			<div id="photoRight">
				<p><img alt="photo3" height="493" src="images/photo3.jpg" width="434" /></p>
			</div>
		</div>

My CSS:

#photosWrapper {
	overflow: hidden;
	width: 100%;	
}

#photosWrapper p {
	margin: 10px;
}

#photosLeft {
	float: left;
	width: 318px;	
}

#photosLeft p {
	margin-bottom: 5.3em;
}

#photoRight {
	float: right;
	width: 434px;
	margin-right: 20px;
}
2

What’s the width of the photosWrapper’s parent div? Remember that margin/padding adds to the overall width, so #photoRight is actually 454px wide. )Better browsers may let you get away with this.)

#photoRight {
    float: right;
    width: 434px;
    [COLOR="Red"]margin-right: 20px;[/COLOR] /* adds to overall width */
}
3

what you are experiencing is the dreaded double margin IE bug. try adding display:inline to your #photoRight rule.

Hope that helps.

4

Thank you ralph.m and dresden_phoenix for your help on that problem. The display:inline fixed that problem.

Now I have encountered another problem, which is photoRight appears with only about a 1/4 of the photo on the screen, the rest disappears off to the right of the screen. The link to see the web page is here - this is no screenshot it is the real thing. That problem appears in the newest version of FireFox, which the browser I use before testing in other browsers. Could someone please help me fix the latest problem?

5

Removing this gigantic width will fix the Firefox problem:

#photosWrapper {
  overflow: hidden;
  [COLOR="Red"]width: 1070px;[/COLOR] /*remove*/
}

I suspect the problem you were seeing before was at least partly because of the padding on the <p> around your left images:

#photosWrapper p {
  margin: 10px;
}

It would be better to fix things like that than run to display: inline.

6