How to Define the Basic Page Layout in CSS3 - dummies

How to Define the Basic Page Layout in CSS3

By John Paul Mueller

The jQuery UI Layout Plug-in for CSS3 makes it incredibly easy to create various kinds of layouts for your site without spending a lot of time. The layouts can incorporate all sorts of interesting features, such as the ability to resize partitions dynamically. That’s right; the user can choose how to make each section of a page in order to focus on the content of interest.

The examples on the site can be complex, but it pays to review them at jQuery UI Layout Plug-in. This plug-in can help you create amazingly functional sites with very little programming. Of course, a simpler example is always welcome.

This example demonstrates the simplest layout you can create using this plug-in. The starting point is to add a reference to the plug-in library. This is one case where you don’t have to download anything. (You can find complete code for this example in the Chapter 06Layout folder of the downloadable code as Layout.HTML.)


In order to create the panes used for this example, you define <div> tags for North, South, East, West, and Center panes. Of all the panes, the Center pane is the only one that’s required.

<div class="ui-layout-center">
<div class="ui-layout-north">
<div class="ui-layout-south">
<div class="ui-layout-east">
<div class="ui-layout-west">

Notice that each pane has a specific class value associated with it. In order to create a pane in a particular location, you must use the associated pre-defined class. Otherwise the layout plug-in won’t recognize the <div> as a pane. The object within each <div> defines the content for that pane.

The example also requires use of a script to associate the panes with the plug-in. The following script is all you need to make this example functional.

<script type="text/javascript">
 function ()
  $('body').layout({ applyDemoStyles: true });

The arguments you supply to the layout() function determine the appearance of the panes. The applyDemoStyles argument provides the simplest layout method.


You can perform two tasks with the example. Notice the dark area in the middle of each line separating the panes. Clicking this dark area will close that pane. Clicking it again will reopen the pane. When you hover the mouse cursor over one of the lines, it turns into a double-pointed arrow. This arrow lets you resize the pane as needed.