dimanche 22 mars 2015

Split content into flexible numner of columns

For the last few hours, I have been trying to come up with a solution to the following problem. I have a very text-heavy website using a simple 2 column layout containing of a fixed-width sidebar and a content column that fills the rest rest of the space. With this setup, on most desktop resolutions, the content area will be quite large. The text is organized in many relatively short sections so having it just flow normally is not very pleasant on the eye, most solutions I have found seem to be newspaper-style layout that organizes articles like this (|m| = fixed width side bar):



|m| |s1 s3|

|m| |s2 s4|



rather than the desired



|m| |a1 a2|

|m| |a3 a4|



Now that by itself, would be manageable in a fixed layout, but since the content area itself is supposed to be flexible. If the screen size grows sufficiently small (below a certain threshold), the content should fold into 1 column.



|m| |a1|

|m| |a2|

|m| |a3|

...



The website is for a limited, known subset of people, so a HTML5-only solution, or solutions that break in older versions of Chrome/Firefox/IE are perfectly fine.


Aucun commentaire:

Enregistrer un commentaire