Week 7: Web Design Basics – Intro to CSS Layouts using DIVs (3 columns)

CSS 3-Col Intro

Intro to 3-Col CSS Layouts

Float Left, Float Right

This time around we are going to add a third column to the layout using a float left and float right method.

Sample Files

Let’s start with a layout using a wrapper to contain a header, footer and three DIV’s. We will use sidebar1, sidebar2, and content for the three middle div’s.

<div id=”wrapper”>Content for id “wrapper” Goes Here

<div id=”header”>Content for id “header” Goes Here</div>

<div id=”sidebar1″>Content for id “sidebar1″ Goes Here</div>

<div id=”sidebar2″>Content for id “sidebar2″ Goes Here</div>

<div id=”content”>Content for id “content” Goes Here</div>

<div id=”footer”>Content for id “footer” Goes Here</div>

</div>

Define the page width in the wrapper and center using margin-left, margin-right set to auto.

#wrapper {

background-color: #CCC;

width: 960px;

margin-right: auto;

margin-left: auto;

}

Style the header.

#header {

background-color: #999;

height: 75px;

}

Float sidebar1 to the left and set the width.

#sidebar1 {

width: 200px;

background-color: #CC3;

float: left;

}

Float sidebar2 to the right and set the width.

#sidebar2 {

background-color: #CC3;

width: 200px;

float: right;

}

Now the finishing touch – with both sidebars floating left and right we now have room in the center for our content div. To center the div use margin-left, margin-right set to auto and make sure the width is set to a size that fits the central area.

#content {

background-color: #39C;

width: 500px;

margin-right: auto;

margin-left: auto;

}

Style the footer and make sure to use clear:both, float:none.

#footer {

background-color: #999;

clear: both;

float: none;

}

</style>

Exercises

Now it is time to work on taking your Travel site and convert it to a CSS layout without using tables.
Draw out the boxes on paper first
try to eliminate unnecessary boxes
simplify!
write out the names of the ID’s and classes you are going to use
Sometimes it is easier to just create a page with all of the divs in place and then add CSS then content.

NOTE: everyone uses CSS layouts these days and it is the standard.

Extra

There are of course lots of CSS tools to help out in layouts – do a google search fro free online css layout generators.