A CSS Three-Column Floated Layout - “The Holy Grail”

This is one of the most sought after techniques on the web. A semantically correct 3 Column Layout using CSS (Cascading Style Sheets). Interestingly enough it is very easy to do. If you haven’t read Part 2 of Using Dreamweaver CS3 and CSS To Control Page Layout then I suggest you take a look before continuing with this example as it is very closely related.

The only difference being the addition of 2 more divs inside the content div. One for the Main Content and the other for the Secondary Content. If you recall from Part 2 we had a Wrapper Div, Main Navigation Div, Content Div and a Footer. The Main Nav was floated to the left and the Content to the right, creating a “virtual gutter” between the two.

This time inside the Content Div, I am going to use the same principal. By adding a mainContent div and floating that to the left and then adding a secondaryContent div and floating that to the right.

As with the 2 Column Layout the CSS is very straight forward.

The last thing that I would do is to remove the padding from the content element and apply it to the content of the secondary content instead.

You should now be left with a very solid 3 Column Layout.

Don’t miss more great content and tutorials, make sure you SUBSCRIBE to the Dreamweavers Spot’s RSS Feed.

In Part 1 of Using Dreamweaver CS3 and CSS To Control Page Layout I showed you a simple way to center a design using auto margins and negative margins. In Part 2 we will tackle the 2 Column Float Based Layout.

CSS Float Based Layouts - Two Column

Personally I find this layout technique to be the easiest method of them all to implement. Some people like using absolute positioning and negative margins but for me the floats are king. Put simply, in a CSS float based layout all you need to do is set the width of the element and then float it left or right. Sound Simple enough?

It is important to note that when using floating elements they are taken out of the normal flow of the document. Therefore the floats need to be cleared at various points in the layout. What I would suggest and it is probably the most common way to do this is to float nearly everything and then clear maybe once or twice at different point in the page, for example the page footer.

Let’s have a look at an example.

1. The basic (X)HTML markup would start something like this:

In this case the Main Navigation will be on the left and the Content will appear on the right. From a useability and accessibility standpoint you will notice that the Content Area appears before the Main Navigation. This is so that screenreader users etc do not have to go through a long list of links before they get to the content.
Read the rest of this entry »

Probably the most common way to use lists for navigation purposes is a Vertical Navigation Bar and in a previous article I took you through How To Create A Vertical Navigation Bar In Dreamweaver Using CSS. In this article I will take you through how to Create a Horizontal Navigation Bar.

1. Let’s Start with a simple, unordered list.

2. Next Let’s Zero out the padding and margins and remove the default bullets. I have also set the width of the nav bar to 720px and have a repeating blue gradient image as a background.

3. At this point the list is still displaying vertically. To make it display horizontally simply add this to your css style sheet.

I tend to use this method as it is a bit less buggy than the other methods.

4. We now need to set the display: property to block as we want the list items to act as buttons. Now I want the width of the buttons to be determined by the anchor text so rather than setting a width on each element I have applied 2ems of padding to the left and right sides. To vertically align the text I have set the line-height to 2.1ems.

Next I want to create a divider in between each link. To achieve this I have applied a divider background image to each of the anchor links.

5. Last thing is to change the color of the text on rollover.

There we have it, a Horizontal Navigation Bar designed using CSS and Dreamweaver CS3.

If you would like more of these great tips then Sign Up for our Web Design Tips Newsletter.

photo credit: Unhindered by Talent

1. Float an Image and Wrap Your Text Around

One of the common questions that people starting out with CSS have is how do you wrap the text around an image? Simple do this:

2. Center A Block Element

As I pointed out in the post about Controlling Page Layout with CSS and Dreamweaver CS3 here is how you center a block element.

3. Use CSS Shorthand

Another thing that I see many CSS designers do is use multiple lines of code where there is a better more efficient way eg: Read the rest of this entry »

One of the things I love about Cascading Style Sheets (CSS) is the ability to control the layout of a web page without having to use presentational markup. A common misconception when designing a page layout with CSS is that it is a difficult task, especially if you are new to the language. I think this is mainly to do with the fact that there are so many browser inconsistencies around and the fact that there are so many different techniques on the web today. When I first started out using CSS to design layouts I often found myself scouring the web and finding quick and easy layout technique that would give me a fast result without understanding how it works. This is something that I don’t want you to do, I want you to understand how the techniques I use work. So if you haven’t done so already Subscribe to the RSS Feed so you don’t miss the rest of the series.

Create a CSS Layout Test Site

First thing is first let’s create a new site definition to house our Layout Test Site.

1. Launch Dreamweaver 8 and choose Dreamweaver Site from the Create New column in the Start Page menu. Alternatively, once you launch Dreamweaver, choose Site > Manage Sites > New, then click Site. Click the Advanced tab if necessary.

2. In the Site Name text box, type CSS Test Layout.

3. Click the file folder icon next to the Local Root Folder text box.

4. In the Choose local root folder dialog box, browse to an appropriate place on your hard drive and click the New Folder icon to create a new folder called css_test_layout.

5. Select the css_test_layout folder as the local root folder for your site.

6. Click OK to accept these minimal settings. If you came to the Site Definition dialog box from the Manage Sites dialog box, click Done from within the Manage Sites dialog box.

Now that you have your site defined, I will guide you through the first exercise, Centering a Design. Read the rest of this entry »

Have you ever wondered how to create Navigation Bars using pure CSS in Dreamweaver. Over the next few days I will be teaching you how to do just that. In this first article I will show how to easily create a Vertical Navigation Bar using some simple list styling techniques.

1. First thing first and let’s start with some great HTML framework.

2. In your CSS file the first thing I like to do is remove the bullets and set the margins to zero.

Read the rest of this entry »