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.

Setting flexible width values

Setting flexible width values - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Setting flexible width values

“

In our last movie, we calculated the percentage values that we are going to need to create a two-column fluid layout. In this movie, we are going to put those values into practice by applying them to the appropriate elements. So I have the fluid.htm file open from the 06_03 directory, and if you remember from our fixed layout in the last chapter, we have a page structure that is pretty much almost exactly the same as we had before. I just want to preview this page in a browser really quickly to show you something about default styling. All right! So I have opened up our page in the browser, and you can see we don't really have any margins or padding goings on within the elements themselves. And as we look through this, obviously the elements are just sort of stacking one on top of each other, so we still need to position everything. But as I resize this browser, I want you to notice something about layouts. By default, layouts are fluid. If you have a block-level element, that…

Contents