Mon, 2010-06-21 12:45
Your advice would be much appreciated.
The code below does what I want in Opera and IE but Firefox centres the middle image to the page and not to the gap between image 1 and 3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image Positions</title> <style type="text/css"> body { width: 90%; margin-right: auto; margin-left: auto; } .clearfloat_Right { clear:right; height:0; font-size: 1px; line-height: 0px; } img.one{ float: left; border: medium ridge #003; margin-right: 10px; } img.two{ display: block; margin-right: auto; margin-left: auto; border: thin solid #000; } img.three{ text-align: center; border: medium ridge #003; float: right; } </style> </head> <body> <img src="" class="one" alt="Image_One_Float_Left" width="180" height="180" name="Image One - Float Left" title="Image One - Float Left" /> <img src="" class="three" alt="Image_Three_Float_Right" width="400" height="130" name="Image Three - Float Right" title="Image Three - Float Right" /> <img src="" class="two" alt="Image_Two_centered_in_Gap" width="200" height="130" name="Image Two - Centred" title="Image Two - Centred" /> <br class="clearfloat_Right"/> <h3 >This layout works fine with Opera, my prefered browser, and with IE.<br/> Unfortunately it does not display correctly with FireFox.</h3> </body> </html>