Larry Steinle

March 20, 2014

CSS3 Table-less Page Layout

Filed under: Web — Larry Steinle @ 12:38 am
Tags: , , , , , ,

For years CSS scholars taught that tables are for displaying information while div and span tags are designed for layout. Unfortunately CSS3 fails to provide a simple set of properties that can make table-less layout adoption popular. In light of the complexity required to support a table-less page layout most developers continue to use tables for page layout. Today’s post offers an alternative option addressing the pains of table-less page layout.

The idea for today’s post originates from the Visual Studio Windows Form editor. The VS.Net Windows Form editor supports two very interesting concepts: dock and fill. These two features for layout simplify creating a windows form with re-sizable controls without any code. This concept seems perfectly suited to solve the CSS3 layout tag problem. Unfortunately the dock and fill concepts do not exist in the CSS3 specification nor have they been proposed.

To demonstrate how the dock and fill behaviors can simplify both our HTML and style-sheet rules I created a JavaScript function that emulates the desired behavior. I only hope the community will see this article (and others like it) and recognize the value of adding a property similar to dock and fill to the CSS3 specification.

My objective for this post is to document how the dock and fill behaviors could be specified along with the working JSFiddle link, CSS Layout Classes, that demonstrates the desired CSS3 behaviors. The JavaScript used to add the dock and fill behavior has been tested in IE 7, IE 8, IE 9, IE 10, IE 11, Chrome, Mozilla, Opera and Safari.

Dock and Fill Common Behaviors

When the dock or the fill property is applied to a body tag the height should be set to a minimum height of the screen size minus margin and border.

Fill Property

The fill property causes a tag to stretch to the available space within the parent tag. The fill property should support the following three options: horizontal, vertical and both. When horizontal is specified then the tag is stretched to the available width. When vertical is selected the tag is stretched to the available height. Horizontal and vertical may both be specified to fill the available width and height of the tag. The shorthand of horizontal and vertical is both.

Dock Property

The dock property should be used to attach the tag to the specified border of the parent tag. The dock property should support the following four options: Bottom, Left, Right and Top.
Docked tags reduce the amount of available space to fill.

Fill and Dock Combinations

The fill rule takes into account the border and padding of the parent tag along with the width and height of surrounding dock tags. A dock tag by itself does not fill the width or height of the control. If you want the dock tag to stretch along the attached border of the host combine it with the appropriate fill-horizontal or fill-vertical property.

Sample

The following HTML sample demonstrates how the CSS dock and fill properties could be supported. To keep things simple I am using CSS Class Names as a substitute for CSS property names.

<body class="fill-both" style="background-color:black;">
    <div class="fill-both" style="background-color: pink;padding-bottom:5px;">
        <div class="dock-top fill-horizontal" style="background-color: white; border: solid 1px green;">Dock Top 1-1</div>
        <div class="dock-top fill-horizontal" style="background-color: white; border: solid 1px green;">Dock Top 1-2</div>
        <div class="dock-top fill-horizontal" style="background-color: white; border: solid 1px green;">Dock Top 1-3</div>
        <div class="dock-bottom fill-horizontal" style="background-color: white; border: solid 1px green;">Dock Bottom 1-1</div>
        <div class="dock-bottom fill-horizontal" style="background-color: white; border: solid 1px green;">Dock Bottom 1-2</div>
        <div class="dock-right fill-vertical" style="background-color: white; border: solid 1px green;">Dock Right 1-1</div>
        <div class="dock-right fill-vertical" style="background-color: white; border: solid 1px green;">Dock Right 1-2</div>
        <div class="dock-left fill-vertical" style="background-color: white; border: solid 1px green;">Dock Left 1-1</div>
        <div class="dock-left fill-vertical" style="background-color: white; border: solid 1px green;">Dock Left 1-2</div>
        <div class="fill-both" style="background-color:red;">
            <div class="dock-top fill-horizontal" style="background-color: silver; border: solid 1px green;">Dock Top 2-1</div>
            <div class="dock-top fill-horizontal" style="background-color: silver; border: solid 1px green;">Dock Top 2-2</div>
            <div class="dock-top fill-horizontal" style="background-color: silver; border: solid 1px green;">Dock Top 2-3</div>
            <div class="dock-bottom fill-horizontal" style="background-color: silver; border: solid 1px green;">Dock Bottom 2-1</div>
            <div class="dock-bottom fill-horizontal" style="background-color: silver; border: solid 1px green;">Dock Bottom 2-2</div>
            <div class="dock-right fill-vertical" style="background-color: silver; border: solid 1px green;">Dock Right 2-1</div>
            <div class="dock-right fill-vertical" style="background-color: silver; border: solid 1px green;">Dock Right 2-2</div>
            <div class="dock-left fill-vertical" style="background-color: silver; border: solid 1px green;">Dock Left 2-1</div>
            <div class="dock-left fill-vertical" style="background-color: silver; border: solid 1px green;">Dock Left 2-2</div>
            <div class="fill-both" style="background-color:green;">
                <p>test1</p><p>test2</p><p>test3</p><p>test4</p><p>test5</p><p>test6</p><p>test7</p><p>test8</p>
            </div>
        </div>
    </div>
</body>
Demonstration using dock and fill CSS properties to manage page layout instead of tables.

Screen shot of HTML demonstration using dock and fill CSS properties to manage page layout instead of tables.

Summary

The dock and fill properties are very simple and straight-forward concepts to grasp that simplify page layout in Windows Forms. I can only hope that someday the dock and fill layout method will be added to the CSS3 specification. To see a JavaScript working demo of the dock and fill layout method refer to my CSS Layout Classes JSFiddle.

Happy Coding!

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: