Get Adobe Flash player

Search

Search this site for:


Related Links






Valid XHTML 1.0 Transitional

Valid CSS!





How to Build a Basic CSS Layout

Designing without tables by using CSS layouts is fast
becoming the new standard on the Web because of the
benefits mentioned in my previous article. Web browsers
used these days are now able to render web pages
proficiently. In this article I will endeavor to create a
basic 2 column CSS layout which you can use for future
design projects.

Here is the live web page of the basic CSS layout:
http://www.isitebuild.com/css/css-layout.html

1. Divide your page into sections - the tags
allows you to create distinct divisions on your web page.
They are identified with a unique id. You can then add a
style (css selector) that specifically applies to the div
of that id. Remember to include the DOCTYPE (to render your
page accurately in the browsers) and meta tags (enables
search engines to spider your pages).

wrapper: is the div that wraps around all the other divs
like a container for the page elements.
header: defines the top banner of the page
main: defines the main content of the page
nav: defines the navigation of the page
footer: defines the footer and sub-navigation of the page

Transitional//EN"
"">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




How to Build a Basic CSS Layout