If you look at the test page for my restyled home page:


you will see a horizontal bronze rectangle just under the top three pictures.

<div><img src="images/Graphics/logohome.gif" width="269" height="74" id="top" alt="vintage textile logo" /><h1>High Style Vintage Clothing<br />&amp;&nbsp;18th Century Costume</h1></div>

<div class="images"><span><img src="images/1920%27s/c422home.jpg" alt="Fortuny peplos" width="800" height="1170" class="tall picleft" /><img src="images/Edwardian/2762p.jpg" alt="Callot Soeurs" width="800" height="1170" class="tall" /><img src="images/1920%27s/1336o.jpg" alt="1920s gold dress" width="800" height="1170" class="tall picright" /></span>
<p id="bronze"></p> </div>

The code was simply a <p> styled with the rule "bronze", which is

#bronze{margin-top:.5em;background:#fc6;height:1em;width:98.5%; text-align:center;}

When I use width of 100% (or no width), the bronze rectangle extends beyond the pictures to the right.

But using less than 100% will cause problems when the browser makes text and pictures large enough, in which case the bronze rectangle obvious is shorter by 1.5% than the parent image box.

How should I style "bronze" to make it exatly fit the above pictures?