Прижать блок к правому блоку без скрола при смене разрешения экрана

13bis · February 23, 2013

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

Столкнулся с такой проблемой:

Дано:

Два блока. 1-ый блок содержит контент, 2-ой как элемент дизайна.

Задача:

Прижать 2-ой блок к правому краю экрана (ширина монитора 1900px по ширине) при условии, чтобы блок оставался именно в правом блоке, без смещений и при ширине экрана, к примеру, 1200px, соответственно чтобы небыло полосы прокрутки.

Вот наглядные скрины:

http://splotnikov.ru/1.jpg

http://splotnikov.ru/2.jpg

Подскажите пожалуйста как сделать.

Заранее благодарен!

Edited February 23, 2013 by 13bis

Березовский · February 23, 2013

это же 1 класс) блоку нужно просто задать position:absolute; right:0px; и он будет у вас всегда привязан к правой стороне что бы вы ни делали с окном браузера)

13bis · February 23, 2013

Здесь ситуация другая. Прижать блок вправо легко, но как сделать так, чтобы изображение во 2-ом блоке (фон) не смещалось влево при смене разрешения экрана (показано на втором скриншоте).

Как вариант можно сделать отступ слева, но появляется полоса прокрутки и overflow:hiden не помогает с ней справиться.

Мелочь, а хочется понять и разобраться...

Edited February 23, 2013 by 13bis

Березовский · February 23, 2013

Здесь ситуация другая. Прижать блок вправо легко, но как сделать так, чтобы изображение во 2-ом блоке (фон) не смещалось влево при смене разрешения экрана (показано на втором скриншоте).
Как вариант можно сделать отступ слева, но появляется полоса прокрутки и overflow:hiden не помогает с ней справиться.
Мелочь, а хочется понять и разобраться...

так оно и не должно смещаться О_О как это? блок не смещается а фон в нем смещается? или я не понял?

13bis · February 24, 2013

Привожу пример кода:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {background:#000; margin:0; padding:0;}

.blog_1 {
position:absolute;
margin:80px;
float:left;
background:url('http://splotnikov.ru/images/blog.jpg') no-repeat;
width:600px;
height:190px;
}
.blog_2 {
position:relative;
float:right;
background:url('http://splotnikov.ru/images/blog-bg-right.jpg') no-repeat right;
width:100%;
height:480px;
}
</style>
</head>
<body>
<div class='blog_1'></div>
<div class='blog_2'></div>
</body>
</html>

Березовский · February 24, 2013

ну а что мешает левый блок привязать к левой стороне?) position:absolute и left:0px ????? ничего никуда уезжать не будет...

13bis · February 25, 2013

А что толку? Мне нужно чтобы фон обрезался с правой стороны блока.

т.е. 1-ый блок имеет фиксированную ширину в 600px, 2-ый блок - всё оставшееся пространство, но он не должен перекрывать 1-ый блок, при смене разрешения экрана. С правой стороны фон должен обрезаться.

Можно реализовать через BODY, но как быть если у пользователя разрешение экрана 1280px? Т.е. фон в body начинается сразу автоматически обрезаться при смене разрешения экрана.

Задача в следующем: при ширине монитора 1920px фоновое изображение прижато к правому блоку, при 1280 фоновое изображение на том же месте без изменений, а начиная уменьшать ширину с 1280 - фоновое изображение начинает обрезаться именно! с правого края.

Березовский · February 25, 2013

пользуйся @media only screen and (max-width: 1025px) { и задавай отдельные стили для соответствующих размеров экрана... честно сказать я так и не проникся тем, что ты хочешь сделать)))

13bis · February 28, 2013

Всё-таки добился я того, что хотелось. Выкладываю код, может быть кому-нибудь и пригодится:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {background:#000; margin:0; padding:0;}
.clearfix:after {
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.l {
width: 450px;
height: 200px;
float:left;
background: #C90 url('http://splotnikov.ru/images/blog.jpg') no-repeat;
}
.r {
background-color: blue;
overflow: hidden;
text-align: right;
white-space: nowrap;
}
.r .inner {
background:#000;
text-align: right;
display: inline-block;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="l"></div>
<div class="r">
		 <div class="inner">
		 <img src="http://splotnikov.ru/images/blog-bg-right.jpg">
		 </div>
</div>
</div>
</body>
</html>

hedgehog · February 28, 2013

Здесь ситуация другая. Прижать блок вправо легко, но как сделать так, чтобы изображение во 2-ом блоке (фон) не смещалось влево при смене разрешения экрана (показано на втором скриншоте).
Как вариант можно сделать отступ слева, но появляется полоса прокрутки и overflow:hiden не помогает с ней справиться.

Помогает, если вешать overflow на враппер-родителя, а не body

http://jsfiddle.net/68jcP/embedded/result/

Sign In

Прижать блок к правому блоку без скрола при смене разрешения экрана

Question

13bis

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Березовский

Link to comment

Share on other sites

13bis

Link to comment

Share on other sites

Березовский

Link to comment

Share on other sites

13bis

Link to comment

Share on other sites

Березовский

Link to comment

Share on other sites

13bis

Link to comment

Share on other sites

Березовский

Link to comment

Share on other sites

13bis

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information