[XHTML/CSS] 2 Divy w lini - problem Opcje

[kris-ldz]

Witam,
piszę sobię właśnie stronke i mam problem - mianowicie mam 2 div'y w jednej linii,
chciałbym, żeby ich wysokości zmieniały się automatycznie - tj. W przypadku gdy
jeden się wydłuża, drugi robi to samo (chodzi tutaj o zachowanie tła - żeby nie znikało).


Poniżej fragment kodu XHTML i CSS:



XHTML:

CODE

<div id="main">
 
 <div id="LeftColumn" style="height: 200px">
 </div>
 
 
 <div id="MainColumn">  
 </div>
 
</div>

CSS:

CODE

/* GŁÓWNA CZĘŚĆ */

#main {

width: 770px;

position: relative;

background: #fff;

padding: 0;

margin-top: 1px;

margin-left: auto;

margin-right: auto;

vertical-align: top;

}



/* LEWA KOLUMNA */

#LeftColumn {

width: 183px;

overflow: hidden;

background: #e60000 url(../images/lc_shadow.gif) top right no-repeat;

height: 100%;

float: left;

}



/* GŁÓWNA KOLUMNA */

#MainColumn {

width: 587px;

height: 100%;

overflow: hidden;

background: #fff url(../images/main_bg.png) top repeat-x;

float: left;

}

W tym momencie, w przypadku gdy w lewej kolumnie jest tekst lub grafika na wysokość 500px,
prawa kolumna obcina się równo z tekstem który zawiera... Jak to rozwiązać?
Zazwyczaj nie mam takich problemów, ale w tym momencie mam chyba jakieś zaćmienie i czuję
się bezsilny (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Proszę o pomoc.


PS. Ustawiałem display: table-cell; dla tych warstw - efekt taki jak chciałem uzyskać, poza IE...

Link do strony: http://www.reczna-chks.na14.pl

Ten post edytował kris-ldz 24.08.2008, 04:34:04