float does not work when combine with HTML5 canvas tag

[theMethodMan]

hi everyone.

i am new to HTML5 and just tried using the canvas tag. the tag rendered my image well. the problem occurs however when i tried to place the tags within a div float. the float does not render at all.

below is a sample of my code. is there any special procedure that i should adopt when using the tag within floats

`
 <div id="layout"> 

   <div id="leftdiv">  
    <canvas id="target" width="500" height="500"></canvas>
   </div>

   <div id="rightdiv">
   <h1> The image </h1> 
   </div>       

</div>

**
The CSS**

layout { width: 800px; background: green;

}

leftdiv { float: left; }

rightdiv { float: right; }

`

[Paulie_D]

Have you cleared the float?

I’m guessing not…or you have missed off the # selector in your CSS.

http://codepen.io/Paulie-D/pen/ECFuf

[theMethodMan]

wow. brilliant paulie

thanks a million for that!, it worked

i have never used the overflow; hidden to clear a float. i normally use this;

<div style="clear: both;"> </div>

Is there a huge difference between the two approaches

warm regards

TheMethodMan

[Paulie_D]

Yes, I used overflow:hidden as a clearfix shortcut.

This

<div style="clear: both;"> </div>

means cluttering your HTML with elements/code that aren’t actually on the page. I try to avoid that whenever possible.

Normally I would use a clearfix class or try and avoid floats altogether. I’m a big fan of inline-block as it avoids the need for clearing altogether…although there are other (minor) issues.

[Author]

Posts