Table-less layout (2 column)

.Silver · #1 (**permalink**) 08-18-2007, 10:16 PM

Today I thought I would write a different tutorial instead of PHP, this time, this will be a tutorial on XHTML and CSS, for this tutorial, we're just going to create the layout, but not anything special for now, just a two column layout with a header and navigation.

So shall we start? You will be needing to files for this, one the xhtml page, I will call this index.html, and the second, style.css. This will be where all of our css styling will go.

Let's get our basic xhtml page, if you don't know the doctype for xhtml, it's shown here. This block of code is the doctype, title, content type meta tag, and starts our body.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My XHTML Layout</title>
</head>
<body>

</body>
</html>

It's nothing special, your everyday normal basic xhtml. Next thing we need to do is set our style sheet into our page.

Code:

<link href="style.css" rel="stylesheet" type="text/css" />

I usually put this underneath my <title> tags. This just calls for our style sheet file, called style.css

Ok so we'll make this a fluid layout, which means it uses percentage to determine how large it's going to be, there are some advantages and disadvantages to this, the advantages being anyone with a small screen won't have to scroll across (say they have a 800x600 screen, and we do a layout at 900px), but a disadvantage is for those with very large wide-screens, that's going to be one hell of a long site.

CSS layouts are made using <div tags, and we then style these div tags. Our first div tag needs to be a container, this will hold everything else into one section. So add this to the body section of your page.

Code:

<div id="container">

</div>

So what's this id for? Each div we do will either have id= or class=, they both let us use css on the div but are called differently, ID is when we will only be using the element once, but class is when we will be using the element more than once. So say on a new system, you have a div to style the header (such as mine), because more than one news will be showing, you would use a class. But this is a layout, not a news system :D.

Now we'll start with out header.

Code:

  <div id="header"><!-- --></div>

Our header will use a background image, so we add  in there so it's visible to the server, but empty. Next bit, the navigation.

Code:

  <div id="navigation">

  </div>

Whenever I'm going to be adding stuff in a div tag, I always separate the start and end of it so I know. Now we need to add some other type of container, but for our two columns, we'll call this one content.

Code:

  <div id="content">

  </div>

Now we need to add our two columns inside of this content div.

Code:

    <div id="left">

    </div>
    <div id="right">

    </div>

So we have our left column, and our right column. Two more divs to add to our layout, in our CSS, we will be using display:inline, which can mess the layout up unless you clear the divs, so we will make a new div with a class this time. Put just after we finish the right div.

Code:

    <div class="clear"><!-- --></div>

We don't need to put anything inside it, so just the html comment will do. One more bit to add, a copyright section. So this will be after the content div now.

Code:

  <div id="copyright">

  </div>

Well that's it for the basic page structure. Obviously nothing will show, but now let's add our CSS to this page. Ok, so first thing we need to do is set everything so it has no padding and margin, we can use an asterix for this. But what is a padding and margin?

The padding is the space inside a box, this case, the body and the divs, the margin is the space outside of the box.

So into our style sheet.

Code:

***
margin: 0;
padding: 0;
}

Now we want to style the body, this will involve the font, and colours.

Code:

body{
background: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #4b4b4b
}

So we get the background, f2f2f2 is a light gray, then we set a font-family, it's always best to do three fonts, arial is the most used since it's easy to read plus everyone should have it. Then the font-size, 10-12px is most widely used, then the colour of the text, which I've done as a dark gray colour.

So now we've got the basic bit done, let's go onto our container, so we used an id for our container div, when referring to an id, we use #, but if it's a class, then we use a period (.).

Code:

#container{
width: 90%;
background: #e6e6e6;
margin: auto;
}

That should just about do it, we set a width, I've used 90% of the screen width, set a different background, this is slightly darker then the body background, now we've used margin again set to auto? This will automatically set the container into the center so it looks a lot better. Just like the content of this site is in the center, and not right to the left.

Now to the header.

Code:

#header{
width: 100%;
height: 70px;
background: url('images/header.jpg') repeat;
}

We set the width as 100%, this makes it the full width of the container, we set a height, this should be the same size as your header. Now in this tutorial, I'm not actually providing an image, but I'll give an example, say you wanted your header to have a pattern, so we say for the background that it's having an image and here's the url to it, and repeat this image.

Code:

#navigation{
width: 100%;
padding: 5px 0;
border-bottom: 2px solid #c0c0c0
}

Our navigation style, the padding again. We have two values, when using two values, it means the first one to the top and bottom, the second one on the left and right. Say you used one value, then this would put the padding on all sides, or you can use four values, top, right, bottom, left. We've also added a border on the bottom, a 2px solid line there's a gray colour.

Code:

#content{
width: 100%;
margin: 10px 0
}
#left{
width: 20%;
display: inline;
float: left;
background: #d8d8d8
}

No point explaining content, but left, we set a width of 20%, we have the background, we have a display inline, this will allow us to have the left div inline with the right div, and we float it to the left hand side.

Code:

#right{
width: 75%;
display: inline;
float: right;
background: #d8d8d8
}

All the same, apart from the width and float, we now float it on the right side of the container which keeps us separated from the left div. Now if you take a look at the layout, you will notice our two columns go beyond the container, this is due to the display inline, this is where the clear comes in handy.

Code:

.clear{
clear: both
}

Now if you look at it, it's all fixed. One more part to do, the copyright.

Code:

#copyright{
width: 100%;
padding: 5px 0;
text-align: center;
border-top: 2px solid #c0c0c0
}

All of this code is anything new, apart from the text-align, this just makes it in the center.

And that's all there is to a table-less two column layout using divs and css.

iznabhero · #2 (**permalink**) 04-30-2008, 03:41 PM

thnx for this code tutorial

ChaosForce · #3 (**permalink**) 07-04-2008, 02:43 PM

coding is hard right??

but nice^_^

**Chris** · #4 (**permalink**) 07-04-2008, 03:36 PM

Please don't post spam.
If you need to bump a resource/tutorial because you need help or feel it should be used, then it would be OK, otherwise, don't.