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

Yesterday’s post ( 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

  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


Comments (1)

  1. Jack Bond says:

    This does not even begin to touch the surface of replacing tables with CSS, believe me, I’d like to in all my pages. Just try effectively removing tables from XHTML strict pages where Firefox is ignoring the width property on inline elements. Floating stuff around ends up seeming like a hack, or items are not displayed anywhere near the order they were placed in the HTML. So you end up with pages that are difficult to maintain, and if you are using master pages, sometimes appear completely different in VS than they do in the browser. I’m just hoping WPF takes off quickly so we can leave the cobbled together HACK world of HTML and CSS behind.

Skip to main content