CODEWITHSUNDEEP
htmlcss
LWill778
LWill778

Reputation: 1

100% Width of header / footer and still center content

Wrecking my brain how to stretch across the entire page

this is what I am trying to figure out...

Upvotes: 0

Views: 4720

Answers (4)

Minja
Minja

Reputation: 786

So you want the header and footer stretching across the entire page (i.e. 100% of screen) while the content area is set to an arbitrary number and centered in the middle of the page?

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>100% Width of header / footer and still center content</title>
  <style type="text/css">
    body { margin: 0; }
    #header { width: 100%; background: red; }
    #content { width: 900px; background: green; margin: 0 auto; }
    #footer { width: 100%; background: blue; }
  </style>
  </head>
  <body>
    <div id="header">Header Area</div>
    <div id="content">Content Area</div>
    <div id="footer">Footer Area</div>
  </body>
</html>

Upvotes: 1

Chandrakant
Chandrakant

Reputation: 1981

I think just give text align center to footer div

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

I hope you are looking this:-

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#header {
height:100px;
background:red;
}

#mid-content {
background:green;
}

#footer {
height:100px;
background:blue;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="mid-content">Tag info
infonewest 4featured faq votes active unanswered
About cs  </div>
<div id="footer"></div>
</body>
</html>

And its fully with 100% width....

demo:- http://jsbin.com/eponir/2/edit#html,live

Upvotes: 0

Andy
Andy

Reputation: 10830

body {
    margin: 0px
    }
.header_wrapper{ width: 100%} //not necessary as it automatically happens
.header{
    //make width whatever you want where the content goes
margin-left: auto;
margin-right: auto;
    }

This is the general idea. Test it out. Add color and whatnot.

Upvotes: 0

Related Questions