[HTML/CSS] Problematyczny layout

Witam,

Potrzebuję skonstruować następujący layout:
http://webevol.duu.pl/test/test1.jpg

Czerwony obszar to zmienna treść. Będą tam wyświetlane bardzo szerokie tabele, powodujące znaczne rozciągnięcie strony, a to z kolei spowoduje pojawienie się poziomego paska.

Chodzi o to, aby po przekroczeniu szerokości przeglądarki (czyli w momencie pojawienia się bardzo szerokiej tabeli), czerwony obszar pozostał na swoim miejscu.

Poziomy pasek ma być, aby można było zobaczyć całą tabelę. Mają się również rozciągać na całą szerokość obszary TOP (zielony) i FOOTER (czarny).

Mam problem z tym czerwonym obszarem, gdyż po wprowadzeniu tam treści, która spowoduje przekroczenie szerokości ekranu, czerwony div przenosi się na dół, a divy top i footer nie rozciągają się (ale to już jest mniej istotny problem).

Tak wygląda teraz strona:
http://webevol.duu.pl/test/test2.jpg

A powinna wyglądać tak:
http://webevol.duu.pl/test/test3.jpg

Proszę o pomoc w kontruowaniu takiego layoutu. Źródło aktualnej strony można znaleźć tutaj:
http://webevol.duu.pl/test

Dziękuję, pozdrawiam.

Za design się płaci.

Demonical Monk napisał(a)

Za design się płaci.

jaki design?

autor: poczytaj o http://www.signs.pl/html/s/overflow.php

W czerwonym divie daj overflow: auto;

poza tym problemem może być to, iż wprowadzony tekst to 1 długi wyraz (brak spacji) i przeglądarka nie ma jak go przełamać.

Pozdrawiam.

Zabawę z overflowem można by zastosować gdybym chciał żeby pasek przewijania pojawiał się jedynie w czerwonym divie. Natomiast mnie chodzi o to żeby szerokość całej strony (łącznie z nagłówkiem i stopką) rozciągała się na tyle ile trzeba (a to z kolei jest determinowane przez zawartość czerwonego diva). Zatem długi tekst nie ma być łamany - właśnie o to chodzi żeby rozciągnął on czerwonego diva, a w konsekwencji całą stronę, w wyniku czego pojawić ma się poziomy pasek przeglądarki (a nie czerwonego diva).</i>

środkowym div daj float:left, prawemu ze środkowych możesz dać min-width, a lewemu ustaw jakiś width. dolnemu div daj clear:left