Creating two columns in css and external style sheets

Two columns

It's a good idea to set the columns inside a container. A container holding everything can be useful for adding images backgrounds later. It can determine the overall width of the page and can be specified as a fixed pixel width or percentage. We'll create a #container code that's 950 pixels wide and the perfect width to hold two columns and fit into most browsers. The margin will be 0 and it will have a background color of light yellow.

#container
{
width: 950px;
margin: 0px auto;
}

Put two columns on the external style sheet and name them #leftcolumn and #rightcolumn. Here's the complete style sheet.

body {
background-color: Black;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}

#wrapper
{
width: 950px;
margin: 0px auto;
}

#leftcolumn {
width: 300px;
background-color: Silver;
}

#rightcolumn {
width: 650px;
background-color: #00CED1;
}

Below is the html notice how the divs are in there, the big container goes first and the last </div> closes it. The leftcolumn and right column come after, in effect, they are *inside* this container.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>one column example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="column-example2.css" media="screen">
</head>
<body>

<div id="container">
<div id="leftcolumn">
<p>left column</p>
</div>
<div id="rightcolumn">
<p>right column</p>
<p>example text</p>
</div>
</div>

</body>
</html>

So there are two columns set up, the left one is 300 pixels wide, the right one is 650 pixels and they each have a background color. What's it look like?

two column example

Not exactly neat columns falling nicely into place.

Add a bit of code to the leftcolumn and tell it where to "float" is needed. Also and a margin is needed on the right column and so it doesn't cross into the leftcolumn.

body {
background-color: Black;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}

#wrapper
{
width: 950px;
margin: 0px auto;
}

#leftcolumn {
width: 300px;
background-color: Silver;
float: left;
}

#rightcolumn {
width: 650px;
background-color: #00CED1;
margin-left: 300px;
}

See it in the image below.

two columns

Go to next page

www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK