Skip to content Skip to sidebar Skip to footer
Home / Css / Header / Html / Layout

Stretchable Header Like Stackexchange

Post a Comment
How can I do with CSS a site layout like webmaster.stackexchange.com that the site is center and the header and footer is as long as the user's window resolution, while the content

Solution 1:

Right click and see the source -- no one forbids you that.

But in short -- one of the possible ways (may not be the best) -- this will make content centered:

HTML

<body><divid="page-wrapper"><divid="page-body"><divid="header"class="clearfix">
    ...

CSS

#page-wrapper {width: 980px; margin: 0 auto; text-align: left;}
#page-body {position: absolute; width: 980px; top: 0;}

You may need to use a bit different approach if you want to have background images on footer & header to cover whole window width.

Solution 2:

Just make a 1x200 (skinny and tall) image containing a gradient, then use this CSS:

#header-bg {
    background: blue url(/my/stretchy/image.png) repeat-x top left;
    text-align: center;
}

#header-content {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}

<div id="header-bg">
    <div id="header-content">blah blah</div>
</div>

You basically just have to tile it horizontally.

Solution 3: 

<div id="topBar">My Epic Top Bar</div>
<div id="page">
       All your lovely page junk goes here
</div>
html, body 
{
    margin:0;
    padding:0;
}
#page 
{
 margin: 0 auto;
  width:500px;  
    margin-top:40px;
    background-color:blue;
}
#topBar {
 width:100%;
  height:40px;
   background-color:#ccc;
   position:absolute;
   top:0;
   left:0; 
}

The margin: 0 auto on #page sets the top/bottom margin to 0 and the left/right margin to auto, centering it since it has a fixed width of 500px. Keep in mind you need to keep the top-margin equal to the height of the #topBar so that #topBar doesn't cover up any of #page

Solution 4:

The most cross-browser consistent manner is as has been mentioned: wrap your fixed width header content with an auto width wrapper.

For browsers that support it, you can make use of :before and :after to achieve a full width header without the extra div: http://css-tricks.com/9443-full-browser-width-bars/

Post a Comment for "Stretchable Header Like Stackexchange"