Question

I am working on a layout which contains a header, a nav bar, and then below it a container. Within the container, I would like to float a directional button to the left, a canvas with margins set to auto, and then another directional button floating to the right.

The problem I am having is that the directional button drops below the canvas. There is more than enough horizontal space for them to fit in the container side by side, so I’m wondering if the canvas is responsible for this. (The width of the container is 985px, each directional button is 86px wide, and the canvas is 675px wide.)

Can anyone tell me why this is happening or point me in the right direction? Please?

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

One fix is to move #RtButton to after #LftButton in the 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>