achieve layout using css

Question

5.00/5 (1 vote)

See more:

hello i am trying to achieve this layout.Check link for layout details.
http://s23.postimg.org/a919dmufv/layout.png[^]

So far i have written this

XML

<body>
    <div id="content">
    <div id="header">
    </div>
    <div id="nav">
    </div>
    <div id="footer">
    </div>
    </div>
</body>

and css:

CSS

body
{
}
#content
{
    margin:0 auto;
    height:1200px;
    width:1000px;
    border:2px solid black;

}
#header
{
    margin:0 auto;
    width:inherit;
    height:200px;
    border-bottom:2px black solid;
}
#nav
{
    margin:0 auto;
    width:inherit;
    height:50px;
    border-bottom:2px solid black;
}
#footer
{

    width:inherit;
    border-top:2px solid black;
    margin-top:-1200px;
    height:200px;
    clear:both;
}

but the footer is not behaving as in diagram.Can you tell me what is wrong with my code? please dont give me some other codes because I am new to css.

Posted 25-Sep-13 7:26am

Karn Singh

Updated 25-Sep-13 7:28am

v2

Add a Solution

Comments

Homero Rivera 25-Sep-13 14:22pm

I might not be able to provide an answer, but I've learn a lot from this question! +5

Abhinav Gauniyal 25-Sep-13 15:05pm

I couldnt understand :(

Karn Singh 25-Sep-13 16:14pm

glad i asked this question

Abhinav Gauniyal 25-Sep-13 14:49pm

Can you post another diagram of what you are getting [the wrong one]. I will surely be able to provide a answer :)

Sergey Alexandrovich Kryukov 25-Sep-13 15:05pm

Good idea. Please provide the sample complete with HTML notify me when you are done, by commenting this comment. I'll gladly up-vote it.
—SA

Abhinav Gauniyal 25-Sep-13 15:05pm

Well i have already done it :)

Karn Singh 25-Sep-13 16:11pm

thanks ABHINAV GAUNIYAL.This is the solution i was looking for.Can you tell me the difference between your solution and mine?Where was i wrong?

Abhinav Gauniyal 25-Sep-13 16:15pm

Compare the html and css codes, i didnt changed a major thing :). The mistake you were making was stacking of html tags. ie. you wanted content after header and nav but you were placing it before. and another thing is you were using width property to be inherited { ofcourse from body element} , thats why it wasnt working. Good Luck :)

1 solution

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)

Abhinav Gauniyal · Accepted Answer · 2013-09-25T09:04:00

Well to achieve the exact layout you should do the following:

CSS:

CSS

#header
{   margin:0px auto;
    height:200px;
    width:1000px;
    border:2px black solid;
}
#nav
{
    margin:0 auto;
    width:1000px;
    height:50px;
    border:2px solid black;
}
#content
{
    margin:0 auto;
    height:800px;
    width:1000px;
    border:2px solid black;

}
#footer
{
    margin:0 auto;
    height:200px;
    width:1000px;
    border:2px solid black;

}

Html:

XML

<body>
    <div id="header"></div>
    <div id="nav"></div>
    <div id="content"></div>
    <div id="footer"></div>
</body>

Some things to go with:
1. Close every tag you open in html
2. Keep the layout simple ie. you wanted content after header and nav but you were placing them before.
3. I didnt do anything except rearranging them and resetting the CSS width property from Inherited to 1000px
4. You can change your width and height accordingly :)

Feel free to ask any questions :)