Dec 162009
 

Anyone can tell you that even if a web exceeds expectations in functionality if it isn’t visually appealing it is doomed for failure. This is where some of the greatest difficulty in creating a website comes in, making one that is both functional and appealing to the eye can be hard if you don’t an artist on your side. This is the problem I face when creating a website from scratch, my artistic nature is more in the logic and functional side of things and not on the visual end. So when I create a website I generally go with the tried and true method of a simple three column layout.

Previously to accomplish my goal of this simple layout I would use tables, but as I’ve found out that was the lazy and bad practice way of creating my desired layout. So that is when I went on a search to create a layout using div tags instead of tables. I concluded that this in conjunction with the proper css would be the best way to create a layout that one could be proud of. The problem I ran into was that I wasn’t familar enough with CSS to write a 3 column layout from scratch so I had to get help.

That’s when a co worker of mine guided me to this post entitled In Search of the Holy Grail. It has an odd title for the purpose of the post, which is to introduce a way of creating a 3 column + header + footer layout using div tags and CSS. This article brings up another good point, the closer your actual content is to the top of the document the better off you are. Now I don’t know how accurate his statements are as I believe search engine spiders are getting ever more sophisticated but it is a practice that certainly will never hurt anything.

This was a very eye opening post as not only gave me a very easy way to create a 3 column page layout but it also helped me learn some new tricks with css that has since helped me create a 2 column layout from scratch. Below this post you will find the CSS + HTML for my initial implementation, I went with a 3 column fixed height layout skipping the header and the footer as I was working within an MVC .NET application and those two pieces were already included in the initial layout.

I would highly recommend reading the article as it creates a good starting point for not only creating a standard layout, but also one that helps with SEO.

#main
{
    padding-left:175px;
    padding-right:175px;
    background-color: #fff;
	overflow:hidden;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#main .column
{
	float:left;
	position:relative;  
	padding-bottom: 20000px;
	margin-bottom: -20000px;
	background-color: Black;
}

#rightColumn
{
	width:175px;
	margin-right: -175px;
}

#leftColumn
{
	width:175px;
	right: 175px;
	margin-left: -100%;
}
#contentColumn
{
	width:100%;
}

<div id="main">
    <div id="contentColumn" class="column">

    </div>
    <div id="leftColumn" class="column">

    </div>
    <div id="rightColumn" class="column">

    </div>
</div>

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.