Forum PHP.pl > Rozplanowanie szerokości bloków.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Rozplanowanie szerokości bloków.

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

djmentos

28.11.2009, 07:41:45

Witam.

Mam następujący problem.
2 bloki div:

Kod

#lewy {
    float: left;
    border: 1px solid blue;
    margin: 20px 20px 20px 0px;
    width: 200px;
}

#prawy {
    float: left;
    border: 1px solid green;
    margin: 20px 0px 20px 0px;
}

Nie wiem jak określić szerokość dla bloku #prawy, tak aby zajmował on całą dostępną przestrzeń.
Takie jakby 100% - 200px ;D

Lion_87

28.11.2009, 09:31:45

~~hmmm w sumie to mógłbyś zrobić jednego diva na 100% szerokości a w nim dać #lewy z 200px i #prawy z 200px margin-left......~~

EDIT: ajj głupio napisałem

procentowo nie możesz?

djmentos

28.11.2009, 12:54:33

Nie bardzo chce działać.

Lion_87

28.11.2009, 13:26:35

aaa JS i screen.availWidth?

[HTML] pobierz, plaintext 
<script type="text/javascript">
var size_width_to=screen.availWidth-200;
 
function size_to()
{
document.getElementById("size_div").style.width=size_width_to;
}
</script> 
 
<body onload="size_to()" />
<span id="size_div" style="margin:0px;padding:0px;height:120px;width:100%;display:block;background:red;">asd</span>     
[HTML] pobierz, plaintext

t4keda

29.11.2009, 09:53:16

Sprawdź to:

[CSS] pobierz, plaintext 
#lewy {
    float: left;
    width: 200px;
}
 
#prawy {
    float: right;
    max-width: 100%;
}
[CSS] pobierz, plaintext

djmentos

3.12.2009, 16:56:25

Cześć.

Niestety to nie pomaga też. Postanowiłem, że zrezygnuje z lewego bloku, jednak sam fakt problemu nadal mnie zastanawia ;D

ucho

3.12.2009, 17:32:44

Ten drugi float jest zbędny:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>test</title>
	<style type="text/css">
	#lewyc {
		float: left;
		padding: 0px;
		margin: 0px;
		width: 200px;
	}
 
	#lewy {
		border: 1px solid blue;
		padding: 20px;
		margin: 0px;
	}
 
	#prawyc {   
		padding: 0px;
		margin: 0px;
		margin-left: 200px ;
	}
 
	#prawy {
		border: 1px solid green;
		padding: 20px;
		margin: 0px;
	}
	</style>
</head>
<body>
	<div id="lewyc">
		<div id="lewy">
			linia <br />
		</div>
	</div>
	<div id="prawyc">
		<div id="prawy">
			bardzo<br />
			duzo<br />
			lini<br />
		</div>
	</div>
	<div style="clear:both"></div>
</body>
</html>
[HTML] pobierz, plaintext

Pamiętaj, że box model ustalony w standardach W3 jest bardzo nie wygodny jeśli chcesz ustawić margin lub border i jednocześnie width/height a któraś z wartości jest wyrażona w % a nie pikselach. Wprowadzono opcję zmiany box-modelu dopiero w CSS3, pewnie minie 10 lat nim będziemy mogli tego używać

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.