mahud's blog

Paint Shop Pro Tutorials, ProBoards Templates, Downloads and More Stuff

< Favicons | Adding Headings, Paragraphs, and Blockquotes >

Creating a <div> based Template using CSS (Part: 1)

17 Nov 2006 > 6 Comments

I’ll kick start this tutorial by dividing the main layout of the template into divisions using <div> tags. Typically, these divisions are given unique identities using the id="" attribute, for example :

id="header"
id="content"
id="sidebar"
id="footer"

HTML

Here’s the (X)HTML mark up for the main layout I am using for the tutorial.

<body>

<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4">/div>
<div id="c5"></div>

</body>

Rather than naming the header div ‘header’, and the footer div ‘foot’ etc, I name all my divs Content 1, 2, 3 etc (or c1, c2, c3, c4 etc for short). This makes sense to me, in case I want to modify the layout (via the Stylesheet) in the future, and place the so-called ‘header’ div, on the right hand side of the page, etc, in which case, the id ‘header’ would no longer make any sense. It also helps keep my Stylesheet tidy, and saves time.

I would advise against using too many abbreviations in your mark up as it will become confusing when making future modifications.

CSS

body {margin: 0 auto; width: 800px;}

/* c1 (Content One). Banner and horizontal menu  */

#c1 {background-color:#cdc9bf; height:100px;}

/* c2, c3, c4 (Content Two, Three, and four) Three column main content */

#c2 {float:left; width:150px; background-color:#a79f91; height:400px;}
#c3 {float:left; width:500px; height:400px;}
#c4 {float:left; width:150px; background-color:#a79f91; height:400px;}

/* c5 (Content Five) Footer content */

#c5 {clear:left; background-color:#cdc9bf; height:100px;}

At this stage, I have defined the height: of each div.

when I begin adding the content, I’ll remove the height, and let the content of the page define the height instead.

I am using the float: method to create a three column layout.

I have used float:left; on all three vertical columns, and clear:left; in #c5 (the footer).

Basically, when you use clear:, the subsequent elements are restored, and no longer wrap around the floating element.

OK, what all that HTML and CSS stuff amounts to is this layout.

After tidying it all up, the CSS for the main layout should look like this:

body {margin: 0 auto; width: 800px;}

#c1 {background-color:#cdc9bf;}
#c2, #c3, #c4 {float:left;}
#c2, #c4 {width:150px;  background-color:#a79f91;}
#c3 {width:500px;}
#c5 {clear:left; background-color:#cdc9bf;}

Feel free to use any of the above HTML and CSS. If you know a better way of achieving the same layout, let me know

< <Back to everything
Keep going… >

HTML and CSS

6 Comments (Have your say)

Kaushal

Comment on December 2, 2006 at 5:35 pm

Thanx a lot,

from so many days i was finding these things, to work with div & css, without tables.

Than You ance again, Kaushal Web Designer
mahud

Comment on December 4, 2006 at 12:21 am

No Problem, Kaushal
Jade

Comment on March 29, 2007 at 10:34 pm

okay i havin a little bit of a problem……cause..most people would call me a beginner but wut thingd do i copy and paste
mahud

Comment on March 30, 2007 at 12:37 am

Hi, Jade. If you want to learn HTML and CSS, I’d advise that you familiarize yourself with the code by typing it out by hand. That way you will start to understand how it all works.

If you are just looking for some premade code you can copy and paste for your website, you can check out the Division based xhtml and css Template.
kalpesh

Comment on March 17, 2008 at 5:40 am

hi

its really good

thanks buddy u make my problame solved
khalid

Comment on May 13, 2008 at 1:38 am

hi

i have a problem for dynamic curve container by div and css.

plz help me

mahud's blog

Creating a <div> based Template using CSS (Part: 1)

HTML

CSS

Related Posts

6 Comments (Have your say)

Kaushal

mahud

Jade

mahud

kalpesh

khalid

Menu

Recently Commented on...

September 4, 2010

August 24, 2010

July 14, 2010

May 3, 2010

April 24, 2010