CSS: Thin banner on top of page (like the orange one on this page)

css

Solution

Below is an example. The main `#banner` element stretches the full screen and is pinned to the top of the viewport using `position: absolute; top: 0; left: 0`. The `width: 100%` makes it stretch the full width.

The `#banner-content` is where you put your content. This is centered and fixed at 800px in width. I've put a border around it so you can see.

Note: I've also 'reset' the margins and padding of all the elements to clear the default padding. You might want to use something like Eric Meyer's Reset CSS in your final application.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Test</title>
    <style type="text/css" media="screen">
     * {
       margin: 0; 
       padding: 0;
     }

     div#banner { 
       position: absolute; 
       top: 0; 
       left: 0; 
       background-color: #DDEEEE; 
       width: 100%; 
     }
     div#banner-content { 
       width: 800px; 
       margin: 0 auto; 
       padding: 10px; 
       border: 1px solid #000;
     }
     div#main-content { 
       padding-top: 70px;
    }
    </style>
</head>

<body>
  <div id="banner">
    <div id="banner-content">
    This is your banner text, centered and fixed at 800px in width
    </div>
  </div>
  <div id="main-content">
    <p>Main page content goes here</p>
  </div>
</body>
</html>

Problem

I need to put a thin banner on the top of the page kinda like the orange notification one on this page. I need it to be absolutely positioned though, because when you click on it it needs to drop down (over the current page, not pushing the current page down). The banner needs to stretch the entire width of window but the content needs to be within 800px in the middle. I have it already made but I am having trouble with the CSS positioning of it. Thanks!!

Original source