How to Create a Website


Web Page Layouts TRY This SiteBuilder FREE! - No Credit Card

Design a Web Page with Divisions and CSS

The accepted way of building web pages today is with division tags and CSS (cascading style sheets).

This can be a very confusing chore if you try to do it with all the bells and whistles that CSS has to offer.

The easiest way for beginners to get started is to use as little HTML code as possible and concentrate on learning the basics of CSS.

One of the advantages of designing web pages in this manner is that you can create very basic structures, build the site with CSS and then do a complete redesign without ever touching the HTML code.

Below you will find 4 designs created by arranging divisions in different ways.

Very little HTML code was used.

Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.

SquareSpaceSquareSpace

Start Your Website Now!SquareSpace


A simple diagram of the Divisions is shown beside each example. You can get more information on using Division Tag from our HTML tutorial.

layout #5Layout #5

The first layout is very basic and uses 2 main divisions.
Get the code: Click Here

The actual structure of the page is shown in the diagram to right.Web Design Layouts


Division 1
left Column heading and navigational devices
right Column document body
Division 2
contains footer


Layout #6

Layout #6

This web page consists of 4 main divisions.Web Design Layout 2
Get the code: Click Here


Division 1
Left Column company Logo
Right Column Slogan
Division 2
1 Column for navigation
Division 3
Left Column - Body Text
Right Column - image
Division 4
1 Column - footer



Layout #7

Layout #7

The web page here is constructed using 3 single column divisions. We did add a fourth to the code for the footer. If you were creating a second version of your site for mobile devices, this is the layout you would use.
Get the code: Click Here




Layout #8

Layout #8

This web design layout is also made up of 4 main divisions.
Get the code: Click Here


Division 1
1 Column for navigation
Division 2
Left Column Logo
Right Column Slogan
Division 3
Left Column Sidebar
Center Column Body content
Right Column Sidebar
Division 4
1 Column for footer


Need Help?

Need Help?If you ever need help developing your own website template, feel free to drop me a line.

Please state your question and tell me the tool you are using to develop your web pages.


Free Website Tutorial

If you'd like a 7 Step crash course on creating websites with HTML and CSS, try our Latest Tutorial. It's all Copy and Paste!