From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Fixed, fluid, and responsive layouts - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Fixed, fluid, and responsive layouts
In this course, we are going to focus on building three main types of layouts: fixed, fluid, and responsive. Now I have got examples of all three of those layout types open here, and I want to go over the basics of each of them, as a way of introducing these layout types. So we have got fixed.htm, fluid.htm, and responsive.htm, those three files, open. I have opened them from the 01_09 directory. Now before we preview these in the browser, before we go into the CSS and take a look at the actual concepts that's driving the different types of layouts, I want to go over the structure of the actual HTML. So I am in fixed.htm and if I scroll down into the body of this document, I can see that the page starts with a header that has the headline Alice in Wonderland, and that's followed by an article which contains some of the opening part of the Alice in Wonderland novel. And then if I go down a little bit further, I can see that I have it an aside pass the article, and this aside has a…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
(Locked)
Box model review8m 47s
-
(Locked)
Calculating element dimensions11m 11s
-
Understanding margin collapse7m 59s
-
(Locked)
Calculating em values7m 41s
-
(Locked)
Calculating percentage values7m 51s
-
(Locked)
Normal document flow13m 3s
-
(Locked)
Controlling element display8m 53s
-
(Locked)
Using CSS Resets7m 11s
-
(Locked)
Fixed, fluid, and responsive layouts9m 9s
-
(Locked)
CSS debugging tools6m 46s
-
(Locked)
Using the Firebug Inspector and the WebKit Web Inspector11m 5s
-
(Locked)
-
-
-
-
-
-
-
-