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

kind_whale · July 11, 2012

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

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

Экран вертикально разделен 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>

С уважением,

Александр

Softlink · July 11, 2012

Наверное, надо использовать media queries?

kind_whale · July 11, 2012

А можно немного конкретнее, куда и как применять эти media queries?

Может есть какой-то другой способ поправить эту проблему?

Sign In

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

Question

kind_whale

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

kind_whale

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information