SYSK 186: CSS as a Replacement of Tables? Yes! … part 2

  • Article

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

  • Static = no other positioning is defined, so it uses elements around it to figure out where it “should live”, so to speak.
  • Relative = moves an element by specified distance relative to where an element would’ve been given the “normal” flow
  • Absolute = (x,y) positioning regardless of the other elements.  This allows for element overlapping.
  • Fixed = absolute to the beginning of the window, not to the beginning of the document.  This allows an element to stay where it is even as the user uses scroll bars to page up-down.
  • Inherit = uses the position of the parent control to determine element’s position

 

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:

  1. Review the CSS specification at http://www.w3.org/TR/REC-CSS2/
  2. Check out CSS-related websites, e.g.:
  3. Purchase books on CSS, e.g.:

· Eric Meyer, Eric Meyer on CSS

· Jeffery Zeldman, Designing Without Tables