Keskustelu: Nettisivujen teko: CSS kaksi palstaa tsydeemi

En nyt itse ainakaan keksi CSS ratkaisua tähän, joten esitämpä ongelman tänne.

Laitetaan kaks palstaa vierekkäin:

<div style="float: left; width: 50%; min-width: 500px"></div>
<div style="float: right; width: 50%; min-width: 500px"></div>

Nyt molemmat palstat vie 50% tilaa, mutta jos selaimen leveys menee alle 1000px, hyppää toinen palsta alapuolelle minimileveyksien takia.

Mahtaako CSS:ssä olla jotain keinoa tässä tilanteessa saada palstat 100%:a leveiksi? Eli jos ne ei mahdu vierekkäin 500px levysinä, niin palstat menee päällekkäin vieden 100% leveydestä.

Tuskin css:ssä, mutta ainahan voit javaScriptillä haistella selaimen leveyttä ja ladata lennossa sen mukaan oikean css-tiedoston.

Tämä vaatii sen, että layoutti on oikeasti sen tasoista, että tuosta on jotain muutakin hyötyä kuin vittuilla käyttäjälle.

Kokeilehan laittaa nuo divit kolmannen divin sisään, jolle määrittelet riittävän suuren minimileveyden, eli

<div style="min-width: 1000px">
  <div style="float: left; width: 50%; min-width: 500px"></div>
  <div style="float: right; width: 50%; min-width: 500px"></div>
</div>

Sami: Matson ideana on tarjota alle 1000 pikselin leiska siten, että laatikot menevät allekkain saatavilla olevaan maksimileveyteen, muutoin jos 1000 pikseliä leveyttä löytyy niin sitten vierekkäin.

Ilman JavaScriptiä on tosiaan vaikea saada haluttua lopputulosta, koska CSS ei tarjoa mitään tapaa saada tietoon elementin leveyttä. @medialla tosin saa kyllä leveystietoja ja voi määrittää eri tilanteisiin eri tyylit, mutta selaintuki voi olla vähän heikko.

Tässä vielä yksi valmis esimerkki aiheesta.

Eli alle 800px leveyden jälkeen "vaihtuu layout".
http://www.themaninblue.com/experiment/ResolutionLayout/

edit:
En jaksanut tutkia kyseistä sivua, kun en alkuperäistä linkkiä löytänyt, joten voi olla voi olla vaikka minkälainen koodipieru.

Jooh no JS:llähän tuo layoutin vaihto onnistuu yksinkertasemmillaan ihan vaikka vaihtamalla containerin CSS classia jos resoluutio menee alle halutun. Ei liene mikään kauhean vaikeakaan toteuttaa.