Wspomogę się obrazkiem

http://i.stack.imgur.com/KBNV0.jpg


Kiedy zmieniam wielkość przeglądarki div CZERWONY i ZIELONY chowają się na dół i jest ok (co zrobić aby na dole były wyśrodkowane ?). Jednak CZARNY content nie wydluza sie na cala szekosc strony - czerwony krzyzyk... Macie jakis pomysl aby po zmniejszaniu okna content chowal sie do okreslonego rozmiaru, potem aby divy spadaly na dol, a jak spadna to content robil sie width:100%; czyli na cala pozostala szerokosc ?

kod - http://jsfiddle.net/henrix343/BWRVk/27/

Tzw. media query w CSS dla min-width i max-width.

No ok wiem z czym to sie je. tylko co tam wstawic aby to dzialalo ? - chodzi o sam CSS aby przejscie bylo plynne.

Dla konkretnych przedziałów rozdzielczości stylujesz divy dokładnie tak jak chcesz by wyglądały.

Dla największych rozdziałek czarny div to np. width 80%, czerwony i zielony po 20%.
Dla niższej rozdzielczości czarny dostaje width 100%, a pozostałe np. margin: 0 auto, ogólnie tak są stylowane jak mają wyglądać.

Innymi słowy to nic innego jak takie projektowanie layoutu za każdym razem innego zależnie od szerokości ekranu.

Przykład, który dałeś w jsfiddle w ogóle nie wyświetla mi się tak jak na screenie, więc nie modyfikowałem. Pokombinuj sam. Podpatrz jak to działa w bootstrapie.

http://jsfiddle.net/BWRVk/29/

Dodałem kontener #side żeby green był pod red a nie obok

@kreatiff - no tak panowie ale nawet z zastosowaniem @media nie moge wystylowac stronki.

@fate dodales tez max-width:350px do contentu, ktorego wlasnie chcialem uniknac. To lewa strona (BLACK) ma sie rozszerzac automatycznie do RED, GREEN.

Gotowe + freestyle
http://jsfiddle.net/BWRVk/31/
i jeszcze po twojemu:
http://jsfiddle.net/BWRVk/32/

@fate, wow respekto. sprobuje u siebie tez dodac #side i zobacze czy pojdzie.