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>