DIV chowający się pod innym, budowa szablonu strony

Mam problem z ustawieniem div by ładnie i dynamicznie zmieniały miejsce położenia, chodzi o div - informacje i stopka które wchodzą pod, div srodek a dokładnie div lewa. Dzieje się tak gdy zawartość div lewa jest większa od zawartości div prawa, co nie jest ciężkie do osiągnięcia gdyż prawa strona jest obecnie bardzo krótka. Nie chcę na sztywno ustalać wysokości div srodek, ponieważ chciałbym by strona dynamicznie się zmieniała pod wpływem dodawania zawartości.

Kod HTML:

 
<div id="page">
	<div id="heading">  </div>
	<div id="baner"> 
		<div id="ship">
			<img src="helios.png">
		</div>
	</div>
	<div id="menu">
		<a href="index.html">HOME</a>
		<a href="#">BLOG</a>
		<a href="galeria.html">GALERIA</a>
		<a href="kontakt.html">KONTAKT</a>
	</div>
	<div id="srodek"> 
		<div id="lewa">
		</div>
                <div id="prawa">
                	<a href="#">HOME</a>
                        <a href="#">BLOG</a>
                        <a href="#">GALERIA</a>
                        <a href="#">KONTAKT</a>
                </div><!--koniec prawa-->
	</div><!--koniec srodek-->
	<div id="informacje"> informacje</div>
	<div id="stopka">  </div>

Kod css:

#page
{
width:1000px;
position:relative;
margin:0 auto;

}
#heading
{
width:1000px;
height:50px;
background-color:pink;

}

#baner
{
width:1000px;
height:250px;
}
#ship
{
width:184px;
height:128px;
position:relative;
z-index:2;
float:right;
bottom:15px;
}
#menu
{
width:998px;
height:60px;
background-color:green;
background-image:url('pm.jpg');
border: 1px solid white;
}

#menu a
{
width:80px;
height:60px;
background-color:#000;
display:block;
float:left;
text-align:center;
line-height:55px;
font-family:Century Gothic;
text-decoration:none;
color:white;
background-image:url('pm.jpg');
}

#menu a:hover
{
font-weight:bold;
background-position:-10px;
}

#prawa a
{
width:250px;
height:60px;
background-color:#000;
display:block;
float:left;
text-align:center;
line-height:55px;
font-family:Century Gothic;
text-decoration:none;
color:white;
background-image:url('pm.jpg');
}
#prawa a:hover
{
font-weight:bold;
background-position:-10px;

}
#srodek
{
width:1000px;
height:700px
}
#lewa
{
width:750px;
background-color:pink;
float:left;
}
#prawa
{
width:250px;
background-color:yellow;
float:left;
}
#informacje
{
width:1000px;
height:50px;
background-color:#5bee66;
clear:both;
}
#stopka
{
width:1000px;
height:30px;
}

Jest to mój pierwszy post z pytaniem, więc nie strzelajcie od razu :) Proszę o pomoc bo nie wiem jak mam osiągnąć zamierzony efekt.

Lindhas napisał(a):

Mam problem z ustawieniem div by ładnie i dynamicznie zmieniały miejsce położenia, chodzi o div - informacje i stopka które wchodzą pod, div srodek a dokładnie div lewa. Dzieje się tak gdy zawartość div lewa jest większa od zawartości div prawa, co nie jest ciężkie do osiągnięcia gdyż prawa strona jest obecnie bardzo krótka. Nie chcę na sztywno ustalać wysokości div srodek, ponieważ chciałbym by strona dynamicznie się zmieniała pod wpływem dodawania zawartości.

Jest to mój pierwszy post z pytaniem, więc nie strzelajcie od razu :) Proszę o pomoc bo nie wiem jak mam osiągnąć zamierzony efekt.

Ale jak one mają się dynamicznie zmieniać.

No w taki sposób by po wpisaniu dużej ilości treści w div lewa, nie zakrywał on div informacje i div stopka. Chodzi więc o to by bez względu na to ile treści postanowię dodać do div lewa, div informacje i div stopka ładnie wyświetlały się na dole strony poniżej div lewa.

Lindhas napisał(a):

No w taki sposób by po wpisaniu dużej ilości treści w div lewa, nie zakrywał on div informacje i div stopka. Chodzi więc o to by bez względu na to ile treści postanowię dodać do div lewa, div informacje i div stopka ładnie wyświetlały się na dole strony poniżej div lewa.

Przy tych divach gdzie chcesz to wykorzystać daj w pliku z css do klasy div takie coś

word-wrap:break-word;

Wielki dzięki, pomogło.