Witam, mam problem z ułożeniem elementów na stronie. Chce zrobić płynny szablon.

[HTML] pobierz, plaintext 
body {
margin:0px;
background-color: #d9d9d5;
}
div.top {
height:100px;
overflow:hidden;
background-image: url('images/gradient.gif');
}
div.logo {
width:107px;
height:100px;
background-image: url('images/logo.gif');
background-repeat:no-repeat;
background-position:center;
}
 
div.menu {
float:left;
width:107px;
overflow: hidden;
position: relative;
}
ul.tekst_menu {
padding:5px;
text-align:center;
font-size:small;
font-family:Georgia;
color:green;
}
div.pages {
position:relative;
box-shadow: 0 0 10px 5px #6666ff;
border-left:1px solid #6666ff;
border-top:1px solid #6666ff;
border-bottom:1px solid #6666ff;
margin-left: 117px;
padding:5px;
height:100%;
background-color:#f7f7f6;
 
}
div.stopka {
position:absolute;
bottom:0px;
clear:both;
width:100%;
height:30px;
background-color: #d9d9d5;
text-align:center;
font-size:small;
font-family:"Times New Roman", serif;
color:#6666ff;
padding:3;
line-height:30px;
}
 
a:link {
color:grey;
}
a:visited {
color:grey;
}
a:hover {
color:green;
font-size:medium;
}
 
div.block {
position:absolute;
margin:5px;
height:70%;
top:0px;
width:50%;
border-width:1px;
border-style:solid;
background-color:#ededeb;
border-top-color:#6666ff;
border-left-color:#6666ff;
border-right-color:#333366;
border-bottom-color:#333366;
}
 
div#otwarte {
top:0px;
left:0px;
width: 49%;
}
div#szukane {
top:0px;
right:0px;
width: 49%;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
               <div class="top">
			<div class="logo"></div>
		</div>
 
		<div class="menu">
			<ul class="tekst_menu">
				<li><a href="#" onClick="zaladuj(\'home\'); return false">Home</a></li>
			</ul>
		</div>
 
		<div class="pages">
                             <div class="block" id="otwarte"></div>
                             <div class="block" id="szukane"></div>
		</div>
 
		<div class="stopka">
		? 2011.
		</div>
[HTML] pobierz, plaintext 

Problem dotyczy elementów w ?pages?. Chciałbym, aby ?pages? miało wysokość do stopki, (która powinna być na samym dole) o raz by w ?pages? znajdowały się dwa divy o szerokości 50% względem ?pages? i o wysokości do końca ?pages?. Div ?pages? nie mogę usunąć, pozostałe warstwy muszą znajdować się w nim. Mam nadzieje, że wytłumaczyłem to w miarę zrozumiale?co robie źle?

Proponuje dla klasy "block" zrezygnować z ABSOLUTE a dać relative czy static i FLOAT na LEFT. Postawią się obok siebie z szerokością 50% "PAGES". Zaraz za nimi dałbym element typu

[HTML] pobierz, plaintext 
<div style="clear: both"></div>
[HTML] pobierz, plaintext 

w celu skasowania FLOATów i zachowania odpowiedniej wysokości "pages" względem "block".

Co do tego by "block" miało zawsze wysokość równą "pages" nie zależnie od ich zawartości to coś się robiło z MARGIN i z OVERFLOW ale nie pamiętam - zaraz poszukam

EDIT: Znalazłem

Tu masz przykład:

[HTML] pobierz, plaintext 
<div class="strona">
   <div class="lewy">...</div>
   <div class="prawy">...</div>
</div>
[HTML] pobierz, plaintext 

i CSS:

[CSS] pobierz, plaintext 
.strona {
   overflow:hidden;
}
 
.lewy, .prawy {
   padding-bottom:10000px;
   margin-bottom:-10000px;
   float:left;
   width:50%;
}
[CSS] pobierz, plaintext 

to taki tam trick jak Cię to bardziej interesuje zajrzyj tutaj

niby wydawało się dobrze z tą wysokością ale na IE 8 "pages" wychodzi po za stopkę i stronę trzeba przewijać do dołu. W firefoxie i chrome po prostu "pages" ucina ale strona mieści się w rozdzielczości ekranu.

Co do "block", to divy faktycznie się ustawiły koło siebie na połowę "pages" ale przy zmianie rozdzielczości ekranu, prawy div ucieka pod lewego div'a

Hmm bo to nie jest takie proste - Sam tego nie pamiętam ale robiłem coś takiego a raczej pomagałem koderowi w firmie i to zrobiliśmy - pamiętam że do równych wyskości kolumn bezwarunkowo potrzebny był ten trick z margin/padding reszty musisz wyszukać niestety.

Co do tego że jeden bloczek najeżdża na drugi to musisz je jakoś ograniczyć w prosty sposób. Musisz ustalić minimalną możliwą szerokość strony jaka Cię zadowala. Oba bloki wrzucasz w diva któremu dajesz min-width na tą wartość. Następnie musisz ustalić min-width dla obu bloków i powinno śmigać