Original widget width is 180px:

Layout reformatted for 220px:

Layout reformatted for 300px:

Layout reformatted side x side for 300px:

Transparent image floating over a variable width background; can scale to fit any column. This is 230 pixels:

This is the code for the transparent scaling versions. Here, set for 100% of a 230 pixel column:

<div style="width:100%; height:57px; background:#625d90; text-align:center; margin:5px 0px;"><a href="http://techtutors.psu.edu/"><img title="Instant help in any lab from experienced I T pros." src="images/ttutorsTRANS.png" width="182" height="57" alt="Tech Tutors techtutors.psu.edu" /></a></div>
<div style="width:100%; height:57px; background:#000000; text-align:center; margin:5px 0px;"><a href="http://lynda.psu.edu/"><img title="Overcome any mountain of technical challenges with lynda.com video tutorials." src="images/ttutorialsTRANS.png" width="185" height="57" alt="Technology Tutorials from Lynda.psu.edu" /></a></div>

Original widget, scaling based on a percent:

The last two are svg images set to scale to 100% of the 200px wide column:

This is the code for the svg versions. In typical construction, my set width div would be a column of any width:

<div style="width:200px;">
<a href="http://techtutors.psu.edu"><img src="images/ttutors.svg" width="100%" height="auto" /></a>
<a href="http://lynda.psu.edu"><img src="images/ttutorials.svg" width="100%" height="auto" /></a>
</div>