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;
}
#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
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
Sprawdzone, działa w każdej przeglądarce.
Nie wpadłem na takie rozwiązanie... Dzięki za pomoc :]