How to obtain this layout without using tables?

Question

0.00/5 (No votes)

See more:

I want to obtain the following layout for a webpage but I don't want to use tables. it consists of header (fixed div), content and footer. the content div should be aligned to the center and is 1000 pixels wide. each of the columns below should extend vertically

I want the layout to be like the one in this link http://i.stack.imgur.com/N2KeN.png

sorry but I am new to css and can't find any tutorials that can help me :( can you please give me the html/css code needed to obtain it? thanks in advance :)

Posted 28-Mar-14 13:58pm

Member 10707867

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Answer 1 · 2014-03-28T14:24:00

Solution 1

Refer: css layout generator[^]

Posted 28-Mar-14 14:24pm

Peter Leow

Updated 28-Mar-14 14:43pm

v2

Akbar Ali Hussain · Answer 2 · 2014-03-31T11:42:00

Solution 2

You can use DIVs for "table, rows, cells" and use "display:table, display:table-row, display:table-cell styles" accordingly.

Refer the following link
http://www.w3schools.com/cssref/pr_class_display.asp[^]

Posted 31-Mar-14 11:42am

Akbar Ali Hussain