If I am understanding you correctly , you want the text to go INSIDE the box, right?
If this is the case, you want to put your list ( the contact info) INSIDE the id=img div.
<div id="wrapper">
<div id="img">
<ul id=“contact”>
<li class="title"><em><strong>K & M Medical, Inc.</em></strong></li>
<li>333 S.Main Street, Suite 607B</li>
<li>Akron, OH 44308</li>
<li><span>Office:</span> (877) 374-1414</li>
<li><span>Fax:</span> (330) 374-1633</li>
<li><span>Email:</span><a href="mailto:info@kmmed.com"> [email]info@kmmed.com[/email]</li>
</ul>
</div>
</div><!-- End Wrapper –>
then you will want to push the list down away from the ::shudders:: image text… by doing this:
#wrapper ul{ padding-top:360px; padding:left:92px /rough measurements here/}
NOW… that it should like what you want …HERE IS WHAT WRONG WITH all of this. as a concept…
-
if the viewer enlarges the fonts enough or if you ad more LIs to your contact info… or just generally more content… it will eventually leak out of the box since your background image wont grow.
-
Why the block of image text?! A user cant google it ( bad SEO) and should he/she/it be interested in copying and forwarding any or all part of the content text.
You should really take the text out ot the bg, put it in a <p> inside the id=“img” div, but before your UL , actually while you are at it use a <hx> tag for “K&M Medical”>
your CSS your css would then need to resemble this:
#wrapper ul, #wrapper h1, #wrapper p{ padding:left:92px ;}
#wrapper h1{padding-top:158px; padding-bottom:29px;}
#wrapper p {padding-top:22px ; }
#wrapper ul {padding-top:50px ; }
This wont help the accessibility issue, but at least you’ll bemove versatile ( if change the image) and you’ll get better SEO
BTW, I eyeballed my measurements so play with the px values +/-
Hope that helps