Witam


Chciałbym aby ten div z czerwonym tłem był tak jak teraz na środku strony, z tym że jeżeli zmniejszę teraz okno przeglądarki to wchodzi on na header i pod footer.
Jak przerobić kod tak aby usunąć ten problem ?

a może pokażesz kod bo bez kodu nic się nie da zrobić

Myślałem że łatwiej będzie pokazać na żywym organiźmie Już wrzucam.

[HTML] pobierz, plaintext 
<div class="container">
 
    <div class="top">
        <div class="contener">
            <div class="logo">
                <a href="/"></a>
            </div>
 
            <div class="facebook">
                <a href="/">
                    <img src="/img/facebook.png" alt="" />
                </a>
            </div>
 
            <div class="menu">
 
            </div>
 
            <br class="clear" />
        </div>
    </div>
 
 
    <div class="content">
            DIV NA ŚRODKU STRONY
    </div>
    <div class="clear" style="height:100px;"></div>
</div>
 
 
<div id="footer">
 
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
html, body { min-width:1000px;margin: 0px;padding: 0px;color: #fff;font-family: 'Open Sans', sans-serif;height:100%;font-size:11px;text-align:justify;}
body{ background-attachment: fixed; background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;position:relative;}
 
.container { min-height: 100%;height: auto !important;height: 100%;margin-bottom:-100px; /* - height of footer */}
 
.top { width:100%; height:100px; background:#fff; -moz-opacity :0.9;opacity :0.9;filter :alpha(opacity=90);}
.top .contener { width:1000px; margin:auto; }
.top .logo { width:200px; float:left; margin-top:20px;}
.top .facebook { width:45px; float:right; }
.top .menu { float:right; }
.top .menu a{ height:100%; display:block; float:left; line-height:100px;color:#000; margin-right:20px; font-family: verdana; font-size: 8pt; text-decoration: none;}
.top .menu a.active { font-weight: bold;}
 
 
.content  {  position:absolute;top:50%;margin-top:-150px;width:100%; height:300px; background:#ff0000; -moz-opacity :0.9;opacity :0.9;filter :alpha(opacity=90); }
 
#footer{ clear:both; width:100%; height:100px; background:#000; -moz-opacity :0.9;opacity :0.9;filter :alpha(opacity=90);}
 
 
[HTML] pobierz, plaintext 

Czy jest w ogóle jakaś szansa aby użyć samego css, bez js ?