Canvas and float

Question

Я работаю над макетом, который содержит заголовок, навигационную панель, а затем под ней контейнер. Внутри контейнера я хотел бы поместить направленную кнопку влево, холст с полями, установленными на авто, а затем другую направленную кнопку, плавающую вправо.

Проблема, которую я испытываю, заключается в том, что направленная кнопка падает ниже холста. Существует более чем достаточно горизонтального пространства для их размещения в контейнере бок о бок, поэтому мне интересно, ответственен ли за холст. (Ширина контейнера составляет 985 пикселей, каждая направленная кнопка имеет ширину 86 пикселей, а ширина холста составляет 675 пикселей).

Может ли кто-нибудь сказать мне, почему это происходит или направить меня в правильном направлении? Пожалуйста?

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

Одно исправление двигаться #RtButton к после #LftButton в HTML:

<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;}