Method C: Floating the content

<div id=”header”>

…header content here…

</div>

<div id=”content”>

…main content here…

</div>

<div id=”sidebar”>

…sidebar content here…

</div>

<div id=”footer”>

…footer content here…

</div>

There is one more method worth mentioning that uses a single float property and still places the content <div> before the sidebar in the markup. This time, we’ll be floating the content <div> to the left and giving it a width that’s less than 100 percent. This will open up enough space for the sidebar to fit nicely on the right.

The CSS

The CSS that’s needed for Method C is as basic as it gets—with a single float property, a desired width for the content area, and a small margin between the two columns.

#header {

padding: 20px;

background: #ccc;

}

#content {

float: left;

width: 66%;

}

#sidebar {

background: #999;

}

#footer {

clear: left;

padding: 20px;

background: #eee;

}

Notice that we need not define a width for the sidebar, as it will just fill in the remaining

width that the content <div> doesn’t use (in this case 34 percent).

Background woes

Oops. In some popular browsers, the background color of the sidebar will show through underneath the content area. Because the sidebar isn’t assigned a specific width, it wants to expand as wide as the browser window.

We can avoid this by adding a left margin to the sidebar that equals the width of the content area. We’ll actually make the margin a bit larger than the content’s width so as to add some white space between columns.

#header {

padding: 20px;

background: #ccc;

}

#content {

float: left;

width: 66%;

}

#sidebar {

margin-left: 70%;

background: #999;

}

#footer {

clear: left;

padding: 20px;

background: #eee;

}

Plain and simple

Alternatively, if no background color is required by the design, then the left margin isn’t necessary. It shows the layout results with the entire #sidebar declaration removed and a small right margin added to the content <div>. Both columns share whatever default background color is specified for the page.

The CSS would be reduced to

#header {

padding: 20px;

background: #ccc;

}

#content {

float: left;

width: 66%;

margin-right: 6%;

}

#footer {

clear: left;

padding: 20px;

background: #eee;

}

In addition to using the float property, we can also create a columnar layout using positioning.Let’s take a look at the final option, Method D.

Continue…

Dreamweaver CS4: The Missing Manual

Browse Timeline

• « Web standard and findability sitting in a tree
• » An issue of semantics

Comments ( 1 Comment )

Add a Comment