Холст и поплавок

Question

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

Проблема, с которой я столкнулся, заключается в том, что кнопка направления опускается ниже холста. Горизонтального пространства для них более чем достаточно, чтобы они поместились в контейнере рядом, поэтому мне интересно, отвечает ли за это холст. (Ширина контейнера составляет 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;}