ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIV в DIVe помогите!
8 сообщений из 8, страница 1 из 1
DIV в DIVe помогите!
    #36557509
fexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fexus
Гость
Друзья! Помогите, пожалуйста, т.к. задолбался уже и силушек нет.

Вопрос: как div "кусочек 1 " и "кусочек 2 " загнать внутрь div-а "Содержимое", т.е. чтобы div "Содержимое" растягивался вниз, при его заполнении, как например боковые div-ы

Код ниже (стандартная трехколоночная верстка, из учебников):

<html>
<head>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
<div class="header" style="width:100%; height:250px; background-color:blue;">
заголовок
</div>
<div class="left" style="width:200; float:left; background-color:green;">
левое меню
<br>
<br>
<br>
<br>
</div>
<div class="right" style="width:200; float:right; background-color:red;">
правое меню
</div>
<div class="content" style="background: repeat-y scroll 0 0 transparent; margin-left:201; margin-right:201; background-color:yellow; border: thin solid #45688E;">
Содержимое
<div class="pin" style="background-color:gray; width:100px; float:left">
кусочек 1
</div>

<div class="pin" style="background-color:gray; width:100px; float:left">
кусочек 2
</div>
</div>
<div class="clear" style="clear:both;">
</div>
<div class="footer" style="height:100; background-color:brown;">
подвал
</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
02.04.2010, 12:40:08
| Ответить | Цитировать | Написать  
DIV в DIVe помогите!
    #36557626
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
fexus , как вариант...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<html>
<head>
<style>
.content {
	background: repeat-y scroll  0   0  transparent; 
	margin-left: 201 ; 
	margin-right: 201 ; 
	background-color:yellow; 
	border: thin solid #45688E;
}
#cnt_1,
#cnt_2 {
	width: 100px;
	background-color:gray;
}
</style>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
<div class="header" style="width:100%; height:250px; background-color:blue;">
заголовок
</div>
<div class="left" style="width:200; float:left; background-color:green;">
	левое меню
	<br>
	<br>
	<br>
	<br>
</div>
<div class="right" style="width:200; float:right; background-color:red;">
	правое меню
</div>
<div class="content">
	Содержимое
	<table cellpadding='0' cellspacing='0' border='0'>
	<tr>
		<td id='cnt_1'>
			<p>Кусочек  1 </p>
		</td>
		<td id='cnt_2'>
			<p>Кусочек  2 </p>
		</td>
	</tr>
	</table>
</div>
<div class="clear" style="clear:both;">
</div>
<div class="footer" style="height:100; background-color:brown;">
подвал
</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
02.04.2010, 13:14:17
| Ответить | Цитировать | Написать  
DIV в DIVe помогите!
    #36557678
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Либо, если устроит, так...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<html>
<head>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
	<div class="header" style="width:100%; height:250px; background-color:blue;">
		заголовок
	</div>
	<div class="left" style="width:200; float:left; background-color:green;">
		левое меню
		<br>
		<br>
		<br>
		<br>
	</div>
	<div class="right" style="width:200; float:right; background-color:red;">
		правое меню
	</div>
	<div class="content" style="background: repeat-y scroll 0 0 transparent; margin-left:201; margin-right:201; background-color:yellow; border: thin solid #45688E;">
		Содержимое
		<div class="pin" style="background-color:gray; width:100px; float:left">
			кусочек  1 
		</div> 
		<div class="pin" style="background-color:gray; width:100px; float:left">
			кусочек  2 
		</div> 
		<div style="clear:both;"></div>
	</div>
	<div class="clear" style="clear:both;"></div>
	<div class="footer" style="height:100; background-color:brown;">
		подвал
	</div>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
02.04.2010, 13:27:55
| Ответить | Цитировать | Написать  
DIV в DIVe помогите!
    #36557768
Фотография adv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
adv
Участник
если я правильно понял:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<html>
<head>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
<div class="header" style="width:100%; height:250px; background-color:blue;">
заголовок
</div>
<div class="left" style="width:200; float:left; background-color:green;">
левое меню
<br>
<br>
<br>
<br>
</div>
<div class="right" style="width:200; float:right; background-color:red;">
правое меню
</div>
<div class="content" style="background: repeat-y scroll 0 0 transparent; margin-left:201; margin-right:201; background-color:yellow; border: thin solid #45688E;">

<div style="background-color:gray; width:100px; float:left">
кусочек  1 <br><br>кусочек  1 
</div>

<div style="background-color:gray; width:100px; float:left">
кусочек  2 
</div>

<div style="background-color:yellow;">
кусочек x<br>
<br>
кусочек x<br>
<br>
кусочек x<br>
<br>

</div>

</div>
<div class="clear" style="clear:both;">
</div>
<div class="footer" style="height:100; background-color:brown;">
подвал
</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
02.04.2010, 13:54:34
| Ответить | Цитировать | Написать  
DIV в DIVe помогите!
    #36557793
fexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fexus
Гость
krvsa,

о! второй вариант устраивает! Как раз то, что хотел. Только не понял, почему так произошло.

дело в clear:both, но почему именно такой эффект- не пойму. (

Колдовство?
...
Рейтинг: 0 / 0
02.04.2010, 14:00:31
| Ответить | Цитировать | Написать  
DIV в DIVe помогите!
    #36557920
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
fexusТолько не понял, почему так произошло.
дело в clear:both, но почему именно такой эффект- не пойму. (
Про какой именно эффект спрашиваешь?
...
Рейтинг: 0 / 0
02.04.2010, 14:32:41
| Ответить | Цитировать | Написать  
DIV в DIVe помогите!
    #36557925
fexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fexus
Гость
krvsa,

Ну, то что див content стал растягиваться после того как прописали clear:both
...
Рейтинг: 0 / 0
02.04.2010, 14:34:11
| Ответить | Цитировать | Написать  
DIV в DIVe помогите!
    #36557968
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
fexus , да. Это из-за того что див со стилем

Код: plaintext
clear:both;

не может быть обтекаемым другими элементами. Т.ч. никакого колдовства...

Мне только странно почему "серединный" необтекаемый блок так влияет на левый и правый блоки... По моему разумению он должен был вести себя как и табличка в моём первом примере. Ан нет...
Может кто просвятит?
...
Рейтинг: 0 / 0
02.04.2010, 14:45:48
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIV в DIVe помогите!
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=255&tid=1453279]:
 0ms
get settings:
 9ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 359ms
get topic data:
 13ms
get forum data:
 4ms
get page messages:
 56ms
get tp. blocked users:
 2ms
others: 230ms
total:  697ms
созд. / загр.: 697ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]