Div inside no-script tag not displaying well

Question

I want to display a noscript warning when users have javascript disabled, in the same way StackOverflow does.

I use this html:

<noscript>    
  <div id="noscript-warning">
    Este sitio funciona mejor con JavaScript habilitado. Descubrí
    <a href="">cómo habilitarlo.</a>
  </div>
</noscript>

and this css:

#noscript-warning
{
    font-family: Arial,Helvetica,sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    text-align: center;
    font-weight: bold;
    font-size: 12pt;
    color: white;
    background-color: #AE0000;
    padding: 10px 0;
    display: block;    
}

#noscript-warning a
{
    color: #FFFFC6;
}

#container
{
    width: 98%;
    margin: auto;
    padding: auto;
    background-color: #fff;
    color: black;
    border-style: solid;
    border-color: #3E4F4F;
    border-width: 1px 2px 2px 1px;
    line-height: 130%;
}

where #container is the main content element of my template.

When the noscript tag is visible, it appears in front of some content. I don't want that, the content should be displayed below the warning.

How can I do that?

Answer 1

The problem is with you setting position: fixed on the warning. You can't really expect the page's content to move around that, since you're fixing it to the top of the browser window. What would happen when you scroll down? The whole page's content rearranges itself to go around the warning?

Do you want the warning to be stuck at the top of the browser window even if they scroll? If not, position: fixed isn't what you're looking for.

Answer 2

If you want the behavior of position: fixed AND need to push the initial content down from the top, you can include a second div in your noscript area. Give this div visibility: hidden and a height equal to the height of the div with position: fixed.