Witam.
Chciałbym sobie przenieść do jednego DIV'a, pełniącego funkcję kontenera, taką grafikę:
Muszę to zrobić tak, aby się dobrze grafika wyświetlała podczas rozszerzania strony w poziomie oraz aby cały DIV zwiększał swoją wysokość w zależności od zawartości, która będzie umieszczona w środku. Górny fragment grafiki nie jest wazny bo będzie zasłonięty. Wymyśliłem zatem taki układ:
W zielonych divach dam sobie mały obrazek z powtarzaniem "repeat-y", w niebieskim będzie dolna krawędź grafiki, a czerwony DIV będzie przechowywał zawartość i tym samym określał wysokość całości.
Kod źródłowy:
<div id="main" style="padding: 20px 20px 20px 20px; position: relative; top: -20px; background-color: yellow;">
<div id="left_side" style="position: absolute; top: 0px; left: 0px; z-index: 2; float: left; width: 15px; height: 100%; background-color: red;"></div>
<div id="right_side" style="position: absolute; top: 0px; right: 0px; z-index: 2; float: left; width: 15px; height: 100%; background-color: blue;"></div>
<div id="footer" style="position: absolute; bottom: 0px; left: 0px; z-index: 2; width: 100%; height: 15px; background-color: cyan;"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est nibh, vehicula a, viverra ut, sagittis ut, lacus. Pellentesque purus. Proin lacus. Suspendisse tincidunt erat ac ante. Vestibulum metus felis, volutpat eu, aliquet et, mollis ut, sem. Curabitur iaculis ipsum. Sed ac ipsum. Vivamus elementum, enim at rhoncus sodales. (...)
</div>
Wynik w FireFoxie (jak zwykle wszystko OK):
Wynik w IE (jak zwykle coś nie tak :P):
Wiem, że problemy ze stópką wynikają z błędnego traktowania przez IE standardu dotyczącego "Box Model'u" i z tym sobie chyba poradzę.
Ale kompletnie nie wiem jak zrobić, aby dwa boczne DIVy (widoczne na ostatnim obrazku w lewym i prawym górnym rogu) dostosowały swoją wysokość do tego głównego DIV'a... Height 100% jak widać nie działa. Próbowałem ustawiać pozycję za pomocą "bottom", ale też nie pomogło. Macie jakieś pomysły?? Takich grafik widuje się od groma na necie, więc na bank ktoś już się z tym uporał, ale mi nigdzie nie wpadły w łapy tutoriale dotyczące tego problemu, a nie wiem jak szukać dokładnie.
Pozdrawiam.
P.S. Z CSSa nie jestem wybitny, więc sorkie za głupoty ;-)
P.P.S. Dodam, że już wiele potu i wysiłku kosztował mnie szkielet tej strony tak jak jest, więc nie chciałbym zmieniać ogólnej koncepcji dla tego jednego DIV'a, więc proszę o "nieinwazyjne" rady ;-)