Камень преткновения

iDeViL · 08.02.2010, 12:05

Бредовая проблема, но я с ней уже какой раз сталкиваюсь, так и не догоню как её решить. Скоро вообще лопну от неё.
Есть следующее

Код HTML:

	<div id="main">
           <div class="right">
             Какой-нибудь текст
           </div>
         </div>

вот стили:

Код HTML:

#main {
	position: relative;
	width: 80%;
	margin: auto;
	min-width: 700px;
	top: 65px;
	border: medium solid #90C;
}
#main .right {
	position: relative;
	right: 0px;
        left: 300px;
	border: solid 1px #666;
}

Если коротко: то главный контейнер имеет выравнивание по-центру, задан в процентах. В нем есть вложенный контейнер, выравнивание которого по правому краю родительского, ширина его плавающая, а вот левая грань на расстоянии 300px.
Все бы хорошо, но дочерний почему то обязательно считает, что его ширина должна быть 100% относительно родительского, заданного с помощью маргина, и независимо, как писать, он все равно "уезжает" вправо на эти 300 px. Пробовал маргин, паддинг, несколько контейнеров.
Один раз решил проблему с помощью js, который при загрузке и изменении размера окна считал необходимую ширину и присваивал её, но это не дело.
Кто знает, как решается? (Relative желательно, причем, и там, и там. И эти 300 px тоже фиксированные)

Niemans · 08.02.2010, 12:23

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style>
#main {
	position: relative;
	width: 80%;
	margin: auto;
	min-width: 700px;
	top: 65px;
	border: medium solid #90C;
}
#main .right {
float: right;
margin-left: 300px;
border: solid 1px #666;
}
.clear {clear: both}
</style>
</head>

<body>
	<div id="main">
           <div class="right">
             Какой-нибудь текст
             Какой-нибудь текст
           </div>
           <div class="clear"></div>
         </div>
</body>
</html>

Добавлено через 3 минуты

или

#main {
position: relative;
width: 80%;
margin: auto;
min-width: 700px;
top: 65px;
border: medium solid #90C;
}
#main .right {
position: absolute;
left: 300px;
right: 0;
top: 0;
border: solid 1px #666;
}

iDeViL · 08.02.2010, 12:32

я остановился на absolute, но из-за того, что он не растягивает контейнер родительский, могут конечно возникнуть проблемы, поэтому и не хотел, а вот первый пример не работает: мне нужно, чтобы контейнер дочерний всегда имел ширину родительского - 300px, а в этом случае, они имеет её только если внутри его что-нибудь растянет.

Niemans · 08.02.2010, 12:35

какие проблемы с absolute?

iDeViL · 08.02.2010, 17:32

Если в нем много текста, и он не влазиет в родительский контейнер, то он просто не растягивает его, а мне нужно, чтобы сразу после родительского добавлялся следующий блок, который съезжает вслед за main в моем случае. И тогда будут либо накладки, либо еще мудренее код.

kost · 09.02.2010, 01:19

Уберите все left/right/float/position у внутреннего, и задайте ему padding-left: 300px;

А лучше нарисуйте схематичную картинку, чего надо добиться.

iDeViL · 09.02.2010, 11:20

Вот, это хочу в общем виде.
По некоторым причинам, все это вложено во внешний контейнер (хотя как показывает практика, значения не имеет: body - тоже по сути контейнер)
И так же, по техническим трудностям, футер должен располагаться вне центрального контейнера, но при этом, при расширении последнего - съезжать вниз или вверх.

Макс-Текс · 09.02.2010, 12:10

А если сделать, как советует kost, вложенный контейнер неплавающим?

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Тест</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="expires" content="0" />
<style type="text/css">
#main {
	position: relative;
	width: 80%;
	margin: auto;
	min-width: 700px;
	top: 65px;
	border: medium solid #90C;
}
#main .right {
margin: 0 0 0 300px;
background : #bfbfbf;
}
</style>
</head>
<body>
<div id="main">
   <div class="right">
      Какой-нибудь текст<br />
      Какой-нибудь текст
   </div>
</body>
</html>

Добавлено через 1 минуту

забыл один закрывающий тэг </div>

iDeViL · 09.02.2010, 13:55

Мне нужно, чтобы он был именно сразу везде прилагал к границам, независимо, есть там что внутри, или нет. А так он будет натягиваться на текст по мере заполнения.

kost · 09.02.2010, 23:43

Судя по картинке -- надо футер к низу прижать?

А то я не могу связать картинку с текстовым описанием и предыдущими попытками.

08.02.2010, 12:05	#1
iDeViL	Бредовая проблема, но я с ней уже какой раз сталкиваюсь, так и не догоню как её решить. Скоро вообще лопну от неё. Есть следующее Код HTML: <div id="main"> <div class="right"> Какой-нибудь текст </div> </div> вот стили: Код HTML: #main { position: relative; width: 80%; margin: auto; min-width: 700px; top: 65px; border: medium solid #90C; } #main .right { position: relative; right: 0px; left: 300px; border: solid 1px #666; } Если коротко: то главный контейнер имеет выравнивание по-центру, задан в процентах. В нем есть вложенный контейнер, выравнивание которого по правому краю родительского, ширина его плавающая, а вот левая грань на расстоянии 300px. Все бы хорошо, но дочерний почему то обязательно считает, что его ширина должна быть 100% относительно родительского, заданного с помощью маргина, и независимо, как писать, он все равно "уезжает" вправо на эти 300 px. Пробовал маргин, паддинг, несколько контейнеров. Один раз решил проблему с помощью js, который при загрузке и изменении размера окна считал необходимую ширину и присваивал её, но это не дело. Кто знает, как решается? (Relative желательно, причем, и там, и там. И эти 300 px тоже фиксированные)

08.02.2010, 12:32	#3
iDeViL	я остановился на absolute, но из-за того, что он не растягивает контейнер родительский, могут конечно возникнуть проблемы, поэтому и не хотел, а вот первый пример не работает: мне нужно, чтобы контейнер дочерний всегда имел ширину родительского - 300px, а в этом случае, они имеет её только если внутри его что-нибудь растянет.

08.02.2010, 12:35	#4
Niemans	какие проблемы с absolute?

08.02.2010, 17:32	#5
iDeViL	Если в нем много текста, и он не влазиет в родительский контейнер, то он просто не растягивает его, а мне нужно, чтобы сразу после родительского добавлялся следующий блок, который съезжает вслед за main в моем случае. И тогда будут либо накладки, либо еще мудренее код.

09.02.2010, 01:19	#6
kost	Уберите все left/right/float/position у внутреннего, и задайте ему padding-left: 300px; А лучше нарисуйте схематичную картинку, чего надо добиться.

09.02.2010, 13:55	#9
iDeViL	Мне нужно, чтобы он был именно сразу везде прилагал к границам, независимо, есть там что внутри, или нет. А так он будет натягиваться на текст по мере заполнения.

09.02.2010, 23:43	#10
kost	Судя по картинке -- надо футер к низу прижать? А то я не могу связать картинку с текстовым описанием и предыдущими попытками.