forest69

Вот так отображается в хроме: Центральный див: Левый див: Верхний див: А так в опере: Центральный див: Левый див: Верхний див:

Добрый вечер всем. Нужно было сверстать вот так: Так, чтобы 1 див был на все окно браузера. У меня получилось сделать для хрома с разрешением 1440х990 В других браузерах и при других разрешениях получается все криво. Может кто-нибудь помочь сверстать кроссбраузерно? Даже хотябы не на весь экран, главное чтобы было крест накрест. Вот мой код странички: <!-- LEFT --> <div class="hor" id="left"> <div class="section"> <h1>LEFT</h1> <a href="#" class="next">Next</a> </div> </div> <!-- TOP --> <div class="vert" id="top"> <div class="section"> <h1>TOP</h1> <a href="#" class="down">Down</a> </div> </div> <!-- MIDDLE --> <div class="hor" id="mid"> <div class="section"> <h1>MID</h1> <a href="#" class="back">Back</a> <a href="#" class="next">Next</a> <a href="#" class="up">Up</a> <a href="#" class="down">Down</a> </div> </div> <!-- BOTTOM --> <div class="vert" id="bot"> <div class="section"> <h1>BOT</h1> <a href="#" class="up">Up</a> </div> </div> <!-- RIGHT --> <div class="hor" id="right"> <div class="section"> <h1>RIGHT</h1> <a href="#" class="back">Back</a> </div> </div> А вот CSS: html{ background-color:#424242; } body{ left:0; position:fixed; top:0; bottom:0; width:300%; height:300% } .hor{ /* Each step takes a third of the width */ float:left; height:33.333%; width:33.3333%; overflow:hidden; position:relative; } .vert{ /* Each step takes a third of the width */ float:none; height:33.333%; width:33.3333%; overflow:hidden; position:relative; } /* left */ #left{ background: no-repeat center center #6f7c18; margin-left:-33.333% } /* top */ #top{ background: no-repeat center center #09C; margin-top:-18.12%; } /* mid */ #mid{ background: no-repeat center center #175765;} /* bot */ #bot{ background: no-repeat center center #3C9; margin-top:18.12% } /* right */ #right{background: no-repeat center center #6a4214;} /* Each step contains a section, centered in the page */ .section{ height:550px; left:50%; margin:-275px 0 0 -328px; position:absolute; top:50%; width:655px; }