Elastic layout, banner background, H1 clickable, logo left:

When visitor shrinks window width, H1 reaction is not "graceful"

[albo]

The current code:
(1) HTML
<div id="branding">
<div class="oi">
<h1><a href="homepage">
Words describing the page contents
</a></h1></div></div>

(2) CSS
#branding { float:left;width:100%;}

#branding *.oi {background:transparent url("branding.png") no-repeat right center;
padding:0 1em;}

h1{font-family:Palatino,"Palatino Linotype",Georgia,Times,serif;

font-weight:normal;

font-size:1.8em;

font-variant:small-caps;

letter-spacing:.1em;

margin-left:270px;

text-indent:-270px;

text-shadow:2px 2px 7px #5a767f; }

h1 a,h1 a:visited,h1 a:hover

{background:transparent url("logo.png") no-repeat left center;

color:black;

line-height:119px;

padding:60px 0 60px 270px;

text-decoration:none;}

(3) The size of "logo.png" is 253px wide by 99px high.

...The problem. I have explored, far and wide, through websites and books, and my creativity. I'm at a loss, and mebbe you can offer a creative suggestion: Keep in mind, the "branding.png" is also an image (gradient, fading left).

Obviously I'm hoping for the logo and h1 to operate somewhat independently.

Due to line-height (currently) this problem occurs. When the visitor shrinks the page width, "Words describing the page contents" wraps ungracefully (large gap up/down) and in IE may even obscure the bottom of the logo (?).

Making the logo an img and floating it left, makes the branding background disappear!

It all looks fine and dandy (all browsers, all systems) when the h1 text is brief, but, when long, pthpthpthpthpth.

Suggestion?

[albo]

Ah, never mind: I found just the trick at a wiki which webmaster rules do not allow me to cite here, and whose own rules do not allow me to credit in my code. Involves a simple span in the h1. My apologies for premature whining.