CSS - The Box Model, Floats, and Positioning

The box model is one of the fundamentals of CSS and here you’ll learn how to use it correctly to make a professional layout. When you understand the Box Model you’ll be well on your way to layout zen and the web will be your oyster!

“Describe a scenario when you would use position:fixed.”
sample interview question

The next trick in your toolbox is mastery of the Box Model. Most web pages are built with boxes within boxes within boxes and on top of boxes and beside other boxes. Read The CSS Box model to learn how “every element in web design is a rectangular box.”

CSS: Tricks: The CSS Box Model

Now it’s time to think about breaking up elements and organizing them into these boxes. Shay Howe can show you exactly how that’s done.

Beginner's guide to HTML & CSS: Lesson 3 - Box Model & Positioning

If you’d like to practice before taking the challenge, we recommend you take the remaining lessons (5-7) of HTML Fundamentals over at Codecademy.

CodeCademy: HTML Fundamentals Lessons 5-7

Got those boxes sorted? Great! Now it’s time to position them correctly with Floats. So far we’ve been stacking boxes on top of each other, but floats let us position the boxes side-by-side. How CSS Floating Works will teach you exactly what floats do and the best way to used them to realise your design.

How CSS Floating Works

Lastly, to see how CSS Positioning works in practice, Learn Positioning In Ten Steps is a great resource. Click on each of the numbered tabs, read each step and see how the rendered code on the right changes with each positioning command.

Learn CSS Positioning In Ten Steps

Also, watch CSS Absolute and Relative Positioning Tutorial to learn the differences between Absolute and Relative positioning and where each should be used in your code.

CSS Absolute and Relative Positioning Tutorial

And lastly, please enjoy this special Coding for GOOD video presentation in two parts with a Front End Developer from Huge.

Basic HTML+CSS: Floats with HUGE Basic HTML+CSS:CSS Positiong with HUGE
What's next? Do the challenge!

1 Comments — Join the discussion

  • 040dd7c3a5d99f991f7022c78fc04026?&s=30&d=mmDaniel

    I had learned a lot of this on my own through research but I found these tutorials and videos to be very informative in a non-overwhelming way. I particularly enjoyed seeing a practical example from a company like HUGE. I'm looking forward to learning more!