Въпрос за 3див-а в един

S

Sunrize

Registered
Значи .. много се чудих,чудих обаче неможах да го измисля .. сайта ми вмомента е ограничен много лошо и немога свободно да направя различните функции а трябва да ги ограничавам спрямо това колко е висок главния ми див ..

Понеже имам :

1 ГЛАВЕН ДИВ и в него имам 3 ПОД..

1вия див искам да седи в ляво .. (вмомента съм му задал float:left;)
2рия див искам да седи в дясно .. (вмомента съм му задал float:right;)
Обаче понеже ако на 3тия див не задам нищо той отива под див 1 и измества див 2 под себе си ... затуй му е зададен float:left;

След като съм им задал тея float-и главния див не иска да променя height-a си спрямо този централния див .. другите 2 дива могат и да стоят статични .. аз така или иначе имам зададен min-height на главния див .. но искам да го направя така че главния див да променя височината си спрямо средния див ( ДИВ 3 ) Как да го направя ?! ( ИДЕИ ?? )

СХЕМА КАК ИСКАМ ДА СТАНЕ :
shemaa.jpg
 
<html>
<head>
<title>3 Div's</title>
<style type="text/css">
.div {
width: 623px;
padding: 2px;
float: center;
background: white;
border: 1px solid black;
}

.div1 {
width: 100px;
height: 400px;
padding: 2px;
float: left;
background: white;
border: 1px solid black;
margin-right: 2px;
}

.div2 {
width: 400px;
height: 400px;
padding: 2px;
float: left;
background: white;
border: 1px solid black;
margin-right: 2px;
}

.div3 {
width: 100px;
height: 400px;
padding: 2px;
float: top;
background: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="div">
<center>General Div</center>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</div>
</body>
</html>
Увеличете...
 
А това е с хедър, поле за меню и футър

index.html

Код: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style2.css" type="text/css">

	<title>Untitled 3</title>
</head>

<body>
<div id="container">

	<div id="header">

	Това ти е хедъра
	
	</div>
	
	<div id="menu">
		Тука ще ти е менюто
	</div>
	

	
		<div id="left">
			<p> лява колонка</p><p> лява колонка</p><p> лява колонка</p><p> лява колонка</p>
		</div>
	
		<div id="middle">
			<p>среда</p><p>среда</p><p>среда</p><p>среда</p><p>среда</p><p>среда</p><p>среда</p>
		</div>
	
		<div id="right">
			<p> дясна колонка<p><p> дясна колонка<p><p> дясна колонка<p><p> дясна колонка<p>
		</div><div style="clear:both;"></div>
	

	
	<div id="footer">
		тука ще е футъра
	</div>
	
</div>


</body>
</html>

style2.css

Код: 
html, body
{
	margin: 0px;
	padding: 0px;
	color: white;
}

#container
{
	background-color: red;
	width: 775px;
	margin: 0 auto;
	
}

#header
{
	background-color: gray;
	height: 95px;
	margin: 0 auto;
}

#menu
{
	background-color: green;
	height: 35px;
	padding-top: 1px;
	padding-left: 50px;
}


#left
{
	background-color: #ccc;
	width: 100px;
	float: left;

}

#middle
{
	background-color: black;
	width: 575px;
	margin: 0 auto;
	float: left;
}

#right
{
	background-color: #ccc;
	width: 100px;
	float: left;

}

#footer
{
	background-color: lime;
	height: 45px;
}
 
Идеята е да не се разместват дивовете в ляво и дясно спрямо тоя в средата .. а главния див да променя височината си спрямо височината на средния див .. С тия флоати нищо не става :o
 
Sunrize каза:
Идеята е да не се разместват дивовете в ляво и дясно спрямо тоя в средата .. а главния див да променя височината си спрямо височината на средния див .. С тия флоати нищо не става :o
Увеличете...
Кодът, който аз съм ти дал работи. Копирай го и пробвай.
 
sinn каза:
Sunrize каза:
Идеята е да не се разместват дивовете в ляво и дясно спрямо тоя в средата .. а главния див да променя височината си спрямо височината на средния див .. С тия флоати нищо не става :o
Увеличете...
Кодът, който аз съм ти дал работи. Копирай го и пробвай.
Увеличете...
бачка бачка ама не .. май нещо не ме разбрахте .. я пак прочетете кво съм написал и го премислете .. тъй не става

едит :: говорим за всички браузъри .. то е ясно че по ИЕ ще върже .. то там не приема добре позиционирането .. я вижте под опера / файърфокс
 
Sunrize каза:
sinn каза:
Sunrize каза:
Идеята е да не се разместват дивовете в ляво и дясно спрямо тоя в средата .. а главния див да променя височината си спрямо височината на средния див .. С тия флоати нищо не става :o
Увеличете...
Кодът, който аз съм ти дал работи. Копирай го и пробвай.
Увеличете...
бачка бачка ама не .. май нещо не ме разбрахте .. я пак прочетете кво съм написал и го премислете .. тъй не става

едит :: говорим за всички браузъри .. то е ясно че по ИЕ ще върже .. то там не приема добре позиционирането .. я вижте под опера / файърфокс
Увеличете...

Ако не съм сигурен 100% няма да ти дам тоя код. Кодът бачка под firefox, safari, chrome и opera. Ти искаш главния див да се променя според средния. Моят код това и прави. Ако не съм разбрал обясни пак.
 
#content {
background-image:url("images/contbackground.gif");
width:1029px;
min-height:855px;
margin: 0 auto;
}

Туй ми е главния див .. другите дивове са добре ама той защо не се разпъва ?
 
Значи слагаш в главен див след всички други (див1, див2, див3)
Код: 
<div class="clear"> </div>
/* css */
.clear{
clear:both;
height:1px;
}
Това би трябвало да ти реши проблема. Важно е да има някакво съдържание в този див. Може да проработи и с празен такъв, но понякога не става. Най- добре е ако имаш някакво реално съдържание което можеш да сложиш него(напр. футър)
 
jamby77 каза:
Значи слагаш в главен див след всички други (див1, див2, див3)
Код: 
<div class="clear"> </div>
/* css */
.clear{
clear:both;
height:1px;
}
Това би трябвало да ти реши проблема. Важно е да има някакво съдържание в този див. Може да проработи и с празен такъв, но понякога не става. Най- добре е ако имаш някакво реално съдържание което можеш да сложиш него(напр. футър)
Увеличете...

Така се прави, но не е важно да има каквото и да било в тоя див!
Та малко теорийка- след като се флоатнат дивовете , за да се разпъва родителя им, както тук в момента не се разпъва(height-та) , трябва тоя флоатинг да се изчисти. @jamby77 е казал как става, но нека допълня:

Код: 
.clear{
clear:both; height:0px; font-size:0px; line-height:0px;
}
<div class="clear"></div>

Този див може да си е напълно празен, никога не съм имал проблем, няма и да имам. А класа е промене, защото понякога в ие-тата ако няма font-size си задава негова височина и се получава кофти празнота.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе