On most of my detail pages, I often use side-by-side pictures:
http://www.vintagetextile.com/new_page_610.htm

using code like

<p><img src="images/Couture/7371b.jpg" width="800" height="1170" class="tall" />&nbsp; <img src="images/Couture/7371d.jpg" alt="" name="back" width="800" height="1170" class="tall" id="back" /></p>

It works well as long as the viewer does not increase his/her font size in the browser, when the pictures no longer appear side-by-side but rather stacked vertically, which I don't intend.
As you can see from the style sheet below, the relevant CSS rules seem to be

body{width: body{margin: and
#main{margin-right:12%;}
since the bulk of the page's code is contained within a <div> with id="main".

I have tried increasing all of the above parameters but they don't give any leeway allowing the user to even slightly increase font size and still retain the proper side-by-side formatting of pictures.
Thanks in advance for your expert help.


body{width:86%;
margin:2% 3.5% 0 4.5%;
padding:0;
border:0;
color:#000;
background-color:#fff;
font:medium/1.2 Verdana, Tahoma, Helvetica, sans-serif;}
.bi{font-weight:bold;}
.lg{font-size:large;}
.lgbi{font-size:large;font-style:italic;font-weight:bold;}
.reserved{color:Red;font-weight:bold;background-color:#fff;}
#bronze-bottom{width:100%;margin:1.3em auto .5em auto;background:#fc6;height:1em;}
#cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.1 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
#cat-bottom a:link{color:#000;text-decoration:none;background-color:#fff;}
#cat-bottom a:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
#cat-bottom a:hover{color:red;text-decoration:none;background-color:#fff;}
#cat-bottom a.herelink:link,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}
#main{margin-right:12%;}
a:link{color:#00f;background-color:#fff;}
a:visited{color:#939;background-color:#fff;}
a:hover{color:#f00;background-color:#fff;}
img{border:0;}
img.tall {width:400px;height:585px;}
img.wide {width:600px;height:500px;}
.bq{ width:80%;padding:.7em;font:italic medium/1.1 Georgia,Times,"Times New Roman",serif;margin-left:1em;}
.cap {font-size: small;font-style:italic;}