How do you create a web page that has “Newspaper Columns”? (You know, like 2-3 columns across the page.)
I remember seeing this somewhere online and would like to learn how to incorporate it into my website, since that “print look-and-feel” still rules over web-stuff.
Debbie
You can do normal floated columns, of course. CSS3 offers new functionality that automatically divides content into columns, but it won’t work in a lot of browsers yet. Or there’s JavaScript, though I’ve found this a little buggy too.
Here’s an interesting challenge that was set recently:
This is a css solution.
This is a javascript solution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}
#container {
border: 1px solid red;
width: 800px;
overflow: hidden;
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px}
#sidebar {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid green;
float: left;
width: 250px}
#content {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid blue;
float: right;
width: 490px}
</style>
<script type="text/javascript">
window.onload=function() {
var maxHeight = 0;
//get the column containers
var colsA = document.getElementById("container").childNodes;
//get the height of the tallest column
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
}
//set all the column containers heights to maxHeight
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
}
}
</script>
</head>
<body>
<div id="container">
<div id="sidebar">
<ul id="menu_list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</div>
<div id="content">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
ante sed, ac turpis dis dui vestibulum aut.
</div>
</div>
</body>
</html>
it appears this thread is related to your other thread.
if so, imho there are other things you should do first before you even think about doing any html/php/javascript coding.
I posted my :twocents: in your other thread.
This is actually an interesting question, because I think DoubleDee is referring to dynamic output from top to bottom:
1 5 9
2 6 10
3 7 11
4 8 12
instead of the usual
1 2 3
4 5 6
7 8 9
10 11 12
@Kalon: I know how to create that in Coldfusion, but I was wondering if you know of any Javascript that can do that as well?
I would generate the html server side after the content has been retrieved from the database.
once you know how many articles are to be displayed on the page and how many columns per page you can (and this is just one option) divide the number of articles by the number of columns and round it up to the next integer to get the number of articles per column. you then loop through the articles and when the article counter gets to the number of articles per column you reset it to 0 and start a new column div.
on page load, the javascript would set all the column divs to the height of the tallest column div as per my earlier demo.
on page load, you can then count how many columns were generated (which will depend on how many articles were required to be displayed) and give them an equal percentage width.
Sounds good. I nearly always can handle it with Coldfusion but there are those times when I need an escape route. I will have a look in to this. Thanks
this is totally wrong, it does no such thing
for text, the down-one-column-and-back-up-and-down-another-column layout is user-hostile
just. say. no.
it might be for some but definitely not for all.
there are plenty of 2,3 and I’ve seen some 4 column layouts as well.
as long as it’s fit for purpose then it’s fine imho.
^ Agree. There are situations where such a layout suit very well, like online classifieds
re: “fit for purpose”
i would like to see an example of a site which presents text in a multi-column layout that is easy to read
the purpose, of course, being that you can actually read it comfortably, not that it looks nice
One thing to bear in mind is that while that kind of layout may look good, it’s usually a pain in the wotsit to read - if you have to scroll down the first column, then back up to the top then down the second column, then maybe again for the third column, that’s irritating. Articles online should continue in one direction only, so that people don’t have to keep going backwards and forwards.
Trying to emulate ‘print look-and-feel’ on the web is often going to lead to a poor user experience. On-screen reading is different from print reading, and your design should make the most of that, and play to the strengths of the online medium, rather than trying to slavishly reproduce a design strategy from the print medium that doesn’t work as well online.
i wish i would have said it so eloquently
thanks, stevie d
what in your opinion is difficult to read might not be difficult to read for someone else.
just like what you might see as a well layed out web page someone else might find irritating.
at the end of the day all you can do as a web developer is advise a client on what you think is best and give your reasons, but if they insist on a particular layout I will give it to them.
what in your opinion is difficult to read might not be difficult to read for someone else.
Luckily we have the awesomeness known as research and science to tell us the Ultimate Answer to Life, the Universe, and the Usability of Multiple Columns of Text, instead of random opinion birthed from whichever brand of amphetamines we’ve dumped in our coffee today! The endless arguments can now be put to rest! (*my brand today? TwinLabs)
http://psychology.wichita.edu/surl/usabilitynews/72/columns.asp
But so then, when DOES opinion come in? Here: this is a Sign of the Upcoming Zombpocalypse! Raise your hand if that looked totally excellent and bodacious. If your Inner Designer is salivating at that, give it a good kick.
Better be hording food and bullets people, the end times are near. As for me, all I want is a “Luddite tool bar” extension for my browser so I can keep CSS on but turn off the more annoying garbage people have been adding to web pages, like text-shadow, transitions & transforms, and making my browser download funky fonts (luckily NoScript seems to block @font-face).
I agree in general but if a client insists on a particular layout contrary to my advice, then I will give them their desired layout every time.
So the client’s opinion matters to me 
- after all, at the end of the project I want them to pay my fee.
Surely you’re not suggesting that as a developer I or any one else must impose on our clients a layout we think is best even if it is not what the client wants?
I can give you an unconditional 100% guaranatee that I won’t ever impose anything on any of my clients.
Luckily we work in a profession that doesn’t have any standards, unlike plumbing, electrical wiring, law, or road building (and it doesn’t. If there were standards, we’d have to be certified or licensed to practise). We can write the largest steaming piles of code ever and we can get rich doing it. 12 year olds with ancient copies of FrontPage can get rich doing it. So when I get clients like this I pass them on to someone’s nephew who knows how to export some HTML tables from Photoshop. Everyone’s happy.
yep :), all we have are W3C “Recommendations”
…and most of those are actually even still in DRAFT!
Hell, recommendations are barely guidelines.
Sometimes I wonder if some of these professions do have standards
I’m sure where you are in the world makes a big difference… and who’s nephew it is doing the work!