CSS Float tutorial

Published: 01 January 1970
on channel: Tom Norman

6,413

A basic demonstration on how to create and control a float using CSS and HTML

A float allows an element to be moved/placed on the webpage

Float event:

elements are removed from the flow of the website. Will cause issues with non floated elements.

Use:
Float: left, right, none
Clear: left, right, both
ORDER MATTERS!!!
Items in the first position will be placed first.

@tommnorman
@schaffencreate

CODE (Be sure to add brackets to the code below)

body
   Width: 980px;

#box1
   height: 400px;
   width: 300px;
   margin: 10px;
   background: #000;

#box2
   height: 300px;
   width: 300px;
   margin: 10px;
   background: #F00;

#box3
   height: 200px;
   width: 300px;
   margin: 10px;
   background: #0F0;

footer
   height: 200px;
   width: 300px;
   margin: 10px;
   background: #00F;

div id="box1" class="box"
/div
div id="box2" class="box"
/div
div id="box3" class="box"
/div

On this page of the site you can watch the video online CSS Float tutorial with a duration of hours minute second in good quality, which was uploaded by the user Tom Norman 01 January 1970, share the link with friends and acquaintances, this video has already been watched 6,413 times on youtube and it was liked by 59 viewers. Enjoy your viewing!

994