A Simple One-Column DIV Layout

CSS Tutorials

Tutorial

Click on thumbnailed images to enlarge

Before you can make a layout, you have to understand that there are two ways to make one. An easy one, and a complicated one. Let's go with the easy one, shall we?

The hard one would be using all HTML, but the easy way would be using CSS, with a dash of HTML. This is easier because things will look nicer and be easier on you for when you need to add things.

To start using CSS, you will need a stylesheet. You can find a very basic one, well whaddya know, right below this text:

<style type="text/css">

body {background-color: HEX COLOR CODE GOES HERE; color: HEX COLOR CODE YOU WANT NORMAL TEXT TO BE HERE; font-family: FONT NAME HERE; font-size: NORMAL FONT SIZE LIKE YOU FIND IN MICROSOFT WORD HERE}

#content {position: absolute; overflow: hidden; top: HOW MANY PIXELS FROM THE TOP YOU WANT THE LAYOUT TO BE HEREpx; left: HOW MANY PIXELS FROM THE LEFT YOU WANT THE LAYOUT TO BE HEREpx; width: HOW WIDE (IN PIXELS) YOU WANT THE LAYOUT TO BE HEREpx}

</style>

<div id="content">

<h1>Heading here</h1>
Words words words words words. Words words words words words. Words words words words words. Words words words words words. Words words words words words. Words words words words words. Words words words words words. Words words words words words. Words words words words words.

</div>

Now, let me explain. The <div id="content"> part is what you were positioning with #content in the stylesheet. The body part was just making some basic changes to the layout. You can put a banner in the content area as well, but make sure it doesn't exceed the width of the layout. If it does, then you want to add this to the stylesheet:

#banner {position: absolute; top: HOW FAR YOU WANT THE BANNER TO BE FROM THE TOP, IN PIXELSpx; left: HOW FAR YOU WANT THE BANNER TO BE FROM THE LEFT, IN PIXELSpx}

Then just use this to put the image in:

<div id="banner">
<img src="URL OF BANNER HERE">
</div>

You will want to upload the banner to a site like [url=http://photobucket.com]PhotoBucket[/url], [url=http://tinypic.com]TinyPic[/url], or [url=http://imageshack.com]ImageShack[/url]. Then you grab the URL they give you and put it in the code.

And that's all you need to make a simple, DIV base layout!

Tutorial Comments

Showing latest 10 of 61 comments

im new to this and dont' know how to use all this

By yonnie17 on Jun 26, 2010 3:40 am

thanks! i was thinking of making my own layout soon ): this helps and im favoriting so that way i can always resource back to this [;

By winterair on Nov 24, 2009 10:35 pm

Thanks a bunch! I neede this. *smiles*

By marynmissouri on Oct 22, 2009 1:49 pm

thanx
this was somewhat helpful

By LeahInTheSkyWithDiamonds on Apr 29, 2009 11:57 am

what if you wanna have the background be an image?
how would I do that?

By rawrlawlz on Apr 22, 2009 9:34 pm

Thank you so much, now I can sumbit website templates to cB!

By funride on Apr 1, 2009 3:43 pm

This was very helpful! Thank you so much!

By CandyPop on Mar 17, 2009 4:21 pm

oh thank you so much :)

By sunshine07 on Jan 26, 2009 1:45 am

i lyk!! thnz lotz!! +o+

By paajnub on Jan 19, 2009 1:10 am

Thank you so much!

By CandyPop on Dec 4, 2008 3:02 pm
View all »

Tutorial Details

Author miceylulu View profile
Submitted on Jan 11, 2007
Page views 84,033
Favorites 200
Comments 61

Tutorial Tags