float垂直不揃いの問題

今日インタフェースを修正して、divにボタンを追加します.右側にあります.htmlコードは以下の通りです.
 

<div class="myPanel">
		<span> </span>
                  <input name="input" type="button" class="arrowUp" value=" " />
</div>

説明:inputのclass属性はボタンピクチャを指定します.
 
Inputにfloat:rightを追加すると、ボタンはdiv右上隅に飛んでいきますが、「私のパネル」は左に垂直に中央に表示されています.そうするとボタンと文字が1行もなく、美しくありません.
 
その後の解決策はinputに別のspanで囲まれ、htmlコードは以下の通りです.

<div class="myPanel">
	<span> </span>
     <span class="arrowPosition">
     <input name="input" type="button" class="arrowUp" value=" " />
    </span>
</div>

 
 
cssスタイルは次のとおりです.
 

.arrowPosition{padding-top:5px; float:right;}

このpadding-topの値は実際の状況に応じて変更されます.
 
また、IE 7でボタンを押すとDIVが飛び出しますので、divブロックにスタイルを追加します:overflow:auto;
 
 
 
 
 
 
番外:
 
jqueryがclass属性を変更する場合、属性名はclassNameと書きます.そうしないとieは認識できません.
 
$(XXX).attr({className:XXX});