Forum PHP.pl > [CSS][HTML]Rozciąganie div'ów! Pomocy!

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]Rozciąganie div'ów! Pomocy!

klapaucius

7.09.2011, 19:05:01

Witam. Mam problem! Chciałbym zrobić coś takiego: stworzyć 3 divy obok siebie:
DIV1 | DIV2 | DIV3

W DIV2 znajduje się tekst. Chcę zrobić tak, aby jeśli DIV2 się rozciągnie od dużej ilości tekstu, to aby DIV1 i DIV2 również się rozciągnęły. Jak to zrobic?

m_ikolaj

7.09.2011, 19:13:33

css: float:left + określona szerokość (width) ?

Daiquiri

7.09.2011, 19:29:45

"equal height columns css" w google i znajdziesz coś dla siebie, np. coś takiego lub takiego.

luck

7.09.2011, 20:01:58

Ja standardowo polecam w takiej sytuacji faux columns - po prostu osobiście wolę takie rozwiązanie, niż "divitis" w samym CSS

klapaucius

7.09.2011, 21:00:49

Przepraszam, ale jestem trochę ciemny... Oto jak wygląda mój kod:

[HTML] pobierz, plaintext 
<div id="srodek">
   <div id="div1"></div>
   <div id="div2">Jakiś tekst<br>z odstepem</div>
   <div id="div3"></div>
</div>
[HTML] pobierz, plaintext

a tutaj css:

[HTML] pobierz, plaintext 
#div1 {
	float: left;
	height: 100%;
	width: 14px;
	background-image: url(images/layout_21.png);
	background-repeat: repeat-y;
}
#div2 {
	background-color: #c9e2a3;
	width: 503px;
	float: left;
}
#div3 {
	background-image: url(images/layout_23.png);
	float: left;
	height: 100%;
	width: 30px;
}
 
[HTML] pobierz, plaintext

I jak zrobić, aby te divy 1 i 2 odpowiednio się rozciągały wraz z divem2?

!*!

8.09.2011, 07:02:24

http://jsfiddle.net/Q48Bv/1/

klapaucius

8.09.2011, 18:20:37

Kurcze wyczerpaliście już chyba wszystkie możliwe sposoby na ten problem. Ja jednak dalej nie mogę sobie z nim poradzić... Kurcze! Nie wiem.. Wrzuciłem całą stronkę do winrar'a... Jeśli by ktoś mógł looknąć byłbym wdzieczny!
Link:
http://www.speedyshare.com/files/30233020/div.rar
Tutaj macie kod:

[HTML] pobierz, plaintext 
<!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=utf-8" />
<title>Dokument bez tytułu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id = "kontener">
    <div id = "div1"></div>
    <div id = "div2">Jakiś tekst z odstępami<br  />kolejna linijka</div>
  	<div id = "div3"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

CSS:

[HTML] pobierz, plaintext 
#kontener {
	background-color: #ccc;
	border: 1px solid #b9babc;
	overflow: hidden;
	width: 546px;
	overflow: hidden;
}
#div1 {
	display: table-cell;
	vertical-align: top;
	background-image: url(layout_21.png);
	background-repeat: repeat-y;
	width: 13px;
	float: left;
}
#div2 {
	display: table-cell;
	vertical-align: top;
	background-color: #c9e2a3;
	width: 503px;
	float: left;
}
#div3 {
	display: table-cell;
	vertical-align: top;
	background-image: url(layout_23.png);
	background-repeat: repeat-y;
	width: 30px;
	float: left;
}
[HTML] pobierz, plaintext

I jak widać Div 1 i div 2 wogle nie jest widoczny.. dlaczego on się nie rozciąga..?

!*!

8.09.2011, 18:30:02

Przejrzałeś link który Ci podałem? Usuń float;

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.