CSS Float – Talking 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.

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>

 

Podcast: Play in new window | Download (Duration: 13:59 — 12.8MB)

Subscribe: Apple Podcasts | Android | Email | RSS