Tutorial: Creating a 3-column layout (Part 1)
Posted by Luke Anderson on 03 Jun 2008
This weeks tutorial is on how to create a 3-column layout and how to style it with the basics. There will be 2 parts to the tutorial, one now and one in a few days. If you require any help, post a Comment. Click read more to read this tutorial.
Step 1
Open up your “index.html” file and add in (between the <body> and </body> tags) the following:
<div class=”container”> <div id=”col1”></div> <div id=”col2”></div> <div id=”col3”></div> </div>
Step 2
Now, open up your stylesheet, which is normally “style.css” but you can call it whatever you want. Add in the following:
.container {
width:690px;
}
#col1 {
width:230px;
height:100px;
}
#col2 {
width:230px;
height:100px;
}
#col3 {
width:230px;
height:100px;
}
In a few days we will be making them actually look like they are proper columns and styling them a bit more.
Tags: 3, Anderson, coding, Column, Columns, CSS, HTML, King, Lewis, Luke, Three, wrapper
Is this it? You can hardly call it a tutorial, more of a snippet.
A little more explination wouldn’t hurt.
I also find it ironic that you call yourself ‘Amazing Coder’ but this page doesn’t validate as XHTML 1.0 Transitional.
What’s the point of this tutorial and then not even posting the follow up? If you’re going to do two part tutorials at least make sure that each one has depth to them. Also Internet explorer is going to chew that code up and spit it out if you’re not careful. Plus I don’t really think a very basic and simple three column layout merits two parts. Just a little feedback for you.
@Jon ok. Luke wrote this story and is a very busy person. Don’t worry though we have the second part coming tomorrow (so he tells me) and we may have some more advanced writers joining soon. We understand that they are basic, but we really wanted to start with our readers from scratch. Guess that was the wrong idea. Expect better things from us in the future.
Sorry but I have to agree with Jon. If you’re really busy then don’t post a half-assed tutorial that doesn’t even get started. Does not matter whether or not it’s basic or advanced, it needs depth and to be honest writing up about a three column layout would only take 10-15 minutes. Not really a valid excuse for sloppy writing. Dissapointed.
Also this site does not validate. The only page that does is the home page. Hardly amazing coding is it lads? In addition to this I’ve noticed that your gallery page is broken. I can see text behind the images.
I think the idea of this site is ok I guess but it’s a huge contradiction in terms.
I’m not taking any blame for this anymore, Luke takes responsibility for his own tutorials, so I’m out on this one.
Look. I’ll get everything sorted but as Lewis said I’m busy so keep commenting but make them positive.
We are giving positive critism. No need to get defensive otherwise you’ll lose your “fan base”. Others suggestions and advice can and should be taken with gratitude as you’ll find out if you ever make it in this industry. It’s been over six days since the turotial was posted with no follow up. Surely it would only take ten minutes to complete the second part as it is only a very basic write up you are providing. Probably the same time it took you to log onto your CMS, check the comments and to reply.
Post