Layouts

We'll try to grasp what the document flow is and how it works. We'll look at the nuances of <code>float</code> and inline-block elements. We'll practice with the basic techniques of laying out webpages.

TaskState
Try to Control the Flownot completedStart
Flow Control, Step 2not completedStart
Flow Control, Step 3not completedStart
Re-Flow Elementsnot completedStart
Another Flow, Step 2not completedStart
Another Flow, Step 3not completedStart
Another Flow, Final Stepnot completedStart
Immersing into Floatsnot completedStart
float and Element Widthnot completedStart
float and Taking out of The Flownot completedStart
Adjacent Floatsnot completedStart
Many Floats in Small Spacenot completedStart
Challenge: Float Puzzlenot completedStart
clear Propertynot completedStart
Overcoming Float Overflow: Spacersnot completedStart
Overcoming Float Overflow: Pseudo-Spacersnot completedStart
Simple Layout, Step 1not completedStart
Simple Layout, Step 2not completedStart
Simple Layout, Final Stepnot completedStart
More Sophisticated Layout, Step 1not completedStart
More Sophisticated Layout, Step 2not completedStart
More Sophisticated Layout, Step 3not completedStart
More Sophisticated Layout, Add Contentnot completedStart
Last Layout, Step 1not completedStart
Last Layout, Step 2not completedStart
Last Layout Completenot completedStart
Challenge: Create Layoutnot completedStart
inline-block Immersionnot completedStart
float vs inline-blocknot completedStart
Simple inline-block Based Layoutnot completedStart
inline-block and Spaces in Codenot completedStart
Challenge: inline-block Based Cats Gallerynot completedStart