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>
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!
Larry Steinle 
Leave a Reply