CSS Layouts without the headache

Hi, I’m Beck Weinhold, one of the newest testers on the Expression Web team and also a newcomer to the world of CSS layouts. While there have been a couple of excellent posts here recently about writing your own CSS layout from scratch, at my skill level I’m really only ready to get started with the predefined CSS layouts that Expression Web provides. If you're also new to CSS layouts, this post is for you.

First, I should note that in version 2, there have been a few changes to the CSS generated by Expression Web for the predefined CSS layouts. One annoying problem that’s been fixed: with a version 1 layout that includes a footer and more than one column, you could easily find your footer overlapping the side column(s) if the main column content is shorter than the side column content.

To take a look at the possibilities, launch Expression Web and choose File > New > Page. Select the CSS Layouts option in the left column.

As you scroll through the list of layouts in the middle column, the preview on the right changes to show how content will be laid out on the page. Dark grey shading and a solid line across the middle of a region indicates that the region has a fixed width in the page layout, while light grey shading with a dotted, arrow-headed line stretching across it indicates that the region expands to fill the remainder of the browser window.

Choosing the “Header, nav, 2 columns, footer” layout, my Design view looks like this:

If you're working with the Design view of your page, make sure that your Visual Aids (on the View menu) are On as well – in particular, the Empty Containers and Visible Borders options – otherwise you’ll just see a blank page with no hints as to how the page is divided.

The HTML for this looks like:

This layout doesn’t look a whole lot like the preview right now. In fact, I’m tempted to stretch the page_content div, the one that will contain most of the text, just to see how it would look. But if I do that by re-sizing the div in the Design view, I’m effectively telling Expression Web that I’d like the page_content div to fix the layout at that height – even if the content requires a larger container. You can see the result in the HTML below.

Leaving the fixed height on the page_content div for now, I’ve added content to my page to see how the layout looks. I’ve also given background colors to the footer div and the page_content div to highlight the div placement. You can see by the background coloring that the right column content has overflowed the page_content div, which means that although the footer doesn’t overlap with the page_content div, it does overlap with the overflowing text. Not so good.

Next time, instead of stretching the page_content div, I can just put some content into my page first to get a feel for how the layout works. Or I can just remove the height property from the page_content div, as I’ve done in the image below. As you can see, the page_layout div expands to fit the text and there’s no overflowing text to overlap with the footer.

I’m pretty happy with the layout I’ve chosen, but I’ve decided that I don’t need the navigation container.

To do this easily, I’ll start by clicking on one of the navigation links. In order to make sure the entire top_nav div is deleted, I’ll click on the <div#top_nav> breadcrumb at the top of the view (just below the title bar) to select the whole div, then hit the Delete or Backspace key.

In the Code half of the view, I can see that the <div id=”top_nav”> tag and its contents are gone; in the Design view, I can see that it didn’t affect the rest of the layout of the page. And if I add more pages later and need to provide navigation, I can just insert a new top_nav div tag below the masthead div, put my links there, and I’ll be in business.

If you’re feeling bold after this introduction to Expression Web’s predefined CSS layouts, take a look at the recent posts that I mentioned earlier from Steve and Morten. Keep an eye out for my next post, where I’ll make my page prettier by customizing Expression Web’s predefined style sheets!