Yesterday’s post (http://blogs.msdn.com/irenak/archive/2006/08/24/717170.aspx) described the four kinds of CSS type selectors. This post addresses the layout options and positioning via the float attribute.
There are two kinds of layouts – in-flow (one element after another) and out-of-flow (absolute positioning). In earlier versions of Visual Studio, the in-flow was called “flow layout”, and the “out-of-flow” was called “grid layout”. In VS 2005, “Statically positioned” and “No positioning attribute” options result in in-flow layout, while “Absolutely positioned” and “Relatively positioned” options are used for out-of-flow.
In CSS, you can define position as
In additional to the layout, we can use the float attribute to “pin” an element to the left or right, and allow the rest of the elements arrange themselves around the pinned element(s).
Important: all elements that have the float attribute defined must be defined before the rest of the html.
For example, the following “pullout quote” could be done by applying a simple style
float:right; border: solid #908070; padding: 3px 2px; margin: 1px 7px; color: red; width: 140px; border-width: 7px 0;
If you found the last two posts interesting, and would like to learn more about leveraging CSS in your web page designs, I encourage you to:
· Eric Meyer, Eric Meyer on CSS
· Jeffery Zeldman, Designing Without Tables