CODEWITHSUNDEEP
htmlcsscanvas
user1193509
user1193509

Reputation:

Canvas and float

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

Upvotes: 0

Views: 5908

Answers (2)

Roel_P
Roel_P

Reputation: 78

Is this what you want, i changed the colour of the canvas and container and some of the size to make it fit the window. I made the buttons a class of the div # container.

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228222

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>

Upvotes: 1

Related Questions