CSS Float – Talking HTML

Talking HTML - A podcast by Tom Norman

Categories:

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.
Go to itunes, stitcher, or wherever you get your podcasts and leave the show a rating and a comment. Ratings get listeners! If you don’t leave a rating/comment then please tell a friend.
@tommnorman
@TNPWDesign
Link to the Youtube video: https://youtu.be/vD3hA5xh7lA
webdevpod.com
CODE
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>
<footer></footer>