キャンバスと浮動小数点

Question

私は、ヘッダ、ナビゲーションバー、そしてその下にコンテナを含むレイアウトに取り組んでいます。コンテナ内では、左に方向ボタン、左に余白があるキャンバス、次に右に浮かぶ別の方向ボタンが浮動します。

私が抱えている問題は、方向ボタンがキャンバスの下に落ちることです。コンテナに横に入るスペースが十分にあるので、キャンバスがこれを担当するのかどうか疑問に思っています。 （コンテナの幅は985px、各方向ボタンの幅は86px、キャンバスの幅は675pxです）

これがどうして起こっているのか、正しい方向に向いているのか誰にでも教えてください。お願いします？

HTML5：

<div id="container"> 
<a href="#" id="LftButton"><img src="imageFiles/arrowButtonLft.png" /></a> 
<div id="canvasWrapper"> 
<canvas id="myCanvas" width="675" height="600"><p>Your browser doesn't support canvas.</p></canvas> 
<script src="aboutMeScript.js" type="text/javascript"></script> 
</div> 
<a href="#" id="RtButton"><img src="imageFiles/arrowButtonRt.png" /></a> 
</div> 

CSS：

body{ 
background-image:url(imageFiles/bubsAndSqs_clip2_02062012.png); 
background-color:#000;} 
#myCanvas{ 
width:675px; 
height:600px; 
float:left;} 
#canvasWrapper{ 
width:675px; 
height:600px; 
margin:auto;} 
#RtButton{ 
float:right;} 
#LftButton{float:left;} 

Answer 1

一つの修正はHTMLで後#LftButtonに#RtButtonを移動することです：

<div id="container"> 
    <a href="#" id="LftButton"><img src="imageFiles/arrowButtonLft.png" /></a> 
    <a href="#" id="RtButton"><img src="imageFiles/arrowButtonRt.png" /></a> 
    <div id="canvasWrapper"> 
     <canvas id="myCanvas" width="675" height="600"><p>Your browser doesn't support canvas.</p></canvas> 
     <script src="aboutMeScript.js" type="text/javascript"></script> 
    </div> 
</div> 

Answer 2

これが何をしたいですが、私は変更キャンバスとコンテナの色と、ウィンドウのサイズに合わせたサイズのものがあります。私はボタンをdiv＃コンテナのクラスにしました。

http://jsfiddle.net/kdNKy/

HTML

<div id="container"> 
     <a href="#" class="LftButton"><img src="http://www.charterfurniture.com/images/arrow_button_next.jpg" /></a> 


    <a href="#" class="RtButton"><img src="http://www.charterfurniture.com/images/arrow_button_next.jpg" /></a> 
<div id="canvasWrapper"> 
<canvas id="myCanvas" width="675" height="600"><p>Your browser doesn't support canvas.</p></canvas> 
<script src="aboutMeScript.js" type="text/javascript"></script> 
</div></div> 

CSS

body{ 
background-image:url(imageFiles/bubsAndSqs_clip2_02062012.png); 
background-color:red;} 
#myCanvas{ 
width:375px; 
height:300px; 
float:left;} 
#canvasWrapper{ 
width:375px; 
height:300px; 
margin:auto; 
background-color:yellow; 
} 

.RtButton{ 
float:right;} 
.LftButton{float:left;}