Форум Сайтостроение Веб-строительство

fixed div наезжает на не_fixed при изменение размера экрана

KW
На сайте с 30.09.2007
Offline
38
kind_whale
1129

Здравствуйте!

Может здесь кто поможет...

Подскажите, пожалуйста, как справиться со следующей ситуацией.

Экран вертикально разделен 50% на 50%.

В левой колонке располагаются вертикально несколько div. Появляется прокрутка страницы.

В правой колонке посередине экрана зафиксирован другой div.

Проблема: при сжатии окна браузера до размера меньше левого div, правый фиксированный div наезжает на левые.

Как и где можно поставить что-то типа min-width, чтобы при сжатии до определенного размера появлялась горизонтальная прокрутка и левый div не наезжал на правые? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

body{height:100%; position:relative;  background: fixed url('.../0.gif'); }



#left_main {

        float:left; 

        width: 50%;

}



#right_main {

        width: 50%;

}



#right {

    width:410px; /*Ширина блока*/

    height:320px; /*Высота блока*/

    margin:0 auto;

    overflow:visible;

    position:fixed;

    left:75%;

    top:50%;

    margin-left:-205px; /*Смещаем блок на половину всей ширины влево*/

    margin-top:-160px; /*Смещаем блок на половину высоты вверх*/

    background:#ffffff;

    //position: absolute;

        top: expression(

            parseInt(document.body.scrollTop, 10) + "px"

        );

}



#note {

        font-family: 'Marck Script', serif;

        width: 300px;

        padding: 50px;

        margin: auto;

        position: relative;

        background-color: #fe6;

        background: -webkit-linear-gradient(#fe6, #f5da41, #f6ef97);

        background: -moz-linear-gradient(#fe6, #f5da41, #f6ef97);

        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8);

        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8);

        box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8), inset 0 6px 6px rgba(0, 0, 0, .1);

        margin-top: 25px;

        margin-bottom: 50px;



}



#note:before {

        content: '';

        display: block;

        width: 90%;

        height: 20%;

        position: absolute;

        left: 10px;

        bottom: 3px;

        background-color: rgba(0, 0, 0, .9);

        -o-transform: rotate(-3deg);

        -webkit-transform: rotate(-3deg);

        -moz-transform: rotate(-3deg);

        -webkit-box-shadow: 0 0 10px #000;

        -moz-box-shadow: 0 0 10px #000;

        box-shadow: 0 0 10px #000;

        opacity: 1;

        z-index: -1;

}



#note:after {

        content: '';

        display: block;

        width: 90%;

        height: 20%;

        position: absolute;

        right: 10px;

        bottom: 3px;

        background-color: rgba(0, 0, 0, .9);

        -o-transform: rotate(3deg);

        -webkit-transform: rotate(3deg);

        -moz-transform: rotate(3deg);

        box-shadow: 0 0 10px #000;

        -webkit-box-shadow: 0 0 10px #000;

        -moz-box-shadow: 0 0 10px #000;

        opacity: 1;

        z-index: -1;

}

</style>

</head>



<body>



 <div id="left_main">



        <div id="note">

                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>



        <div id="note">

                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>



        <div id="note">

                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>



        <div id="note">

                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>



 </div>



 <div id="right_main">

        <div id="right" align="center">

                <div id="note">

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                </div>

        </div>

 </div>

</body>

</html>

С уважением,

Александр

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий