A small CSS trick allows you to read the article in multiple columns. This is only for modern browsers ... even IE9 does not qualify ... As it is only four lines, I present to you the Firefox version.
Firebug -> Console -> Paste the below scriptThanks,
$("#bodyContent").css("-moz-column-count", 2);
$("#bodyContent").css("-moz-column-width", "400px");
$("#bodyContent").css("-moz-column-gap", "20px");
$("#bodyContent").css("-moz-column-rule", "2px solid black");
Then click on Run.
GerardM
3 comments:
Well the -moz- part of those rules especially exclude other browsers. Safari 3 and later support it with the -webkit- prefix.
-webkit prefix also works for Google Chrome.
For permanent multi-column goodness, go to
http://en.wikipedia.org/wiki/Special:Mypage/vector.css
and enter:
#bodyContent {
-moz-column-count:2;
-moz-column-width:400px;
-moz-column-gap:20px;
-moz-column-rule:2px solid black;
-webkit-column-count:2;
-webkit-column-width:400px;
-webkit-column-gap:20px;
-webkit-column-rule:2px solid black;
}
And when wou wrap the whole CSS in
@media only screen and (min-width: 1600px) {
}
it will only show two columns on wide screens.
Post a Comment