Koran

Newspaper layout for the web

I'm not sure why people would want a horizontal scrolling site for tablet devices but hey, it seems to be the trend. Anyway, you can achieve this by simply adding the column-count: num rule to your main container.

Prevent headers from breaking up

For the headers, In order to avoid widows & orphans (those dangling pieces of texts that are left hanging at the end of each column), you need to add a display: inline-block; width: 100%; to your article header CSS.

That basically instructs the browser to always group your headers no matter what.

The rest of the articles will be lipsum texts to see how it works, etc.

Etiam quis nibh sit amet metus

Mauris tristique accumsan nibh, ut egestas urna laoreet at. Cras feugiat gravida nisl auctor mattis. Fusce at felis posuere metus imperdiet sagittis. Morbi adipiscing diam eget ipsum auctor hendrerit pellentesque sapien varius. Nam quis porta dolor. Donec ornare libero eu turpis volutpat non consequat elit egestas. Aliquam erat volutpat. Curabitur leo urna, commodo in accumsan a, vulputate ac nisi. Fusce porta facilisis sapien eget laoreet. Sed sapien ipsum, venenatis nec lobortis et, elementum et lacus.

Etiam quis nibh sit amet metus

Mauris tristique accumsan nibh, ut egestas urna laoreet at. Cras feugiat gravida nisl auctor mattis. Fusce at felis posuere metus imperdiet sagittis. Morbi adipiscing diam eget ipsum auctor hendrerit pellentesque sapien varius. Nam quis porta dolor. Donec ornare libero eu turpis volutpat non consequat elit egestas. Aliquam erat volutpat. Curabitur leo urna, commodo in accumsan a, vulputate ac nisi. Fusce porta facilisis sapien eget laoreet. Sed sapien ipsum, venenatis nec lobortis et, elementum et lacus.

Etiam quis nibh sit amet metus

Mauris tristique accumsan nibh, ut egestas urna laoreet at. Cras feugiat gravida nisl auctor mattis. Fusce at felis posuere metus imperdiet sagittis. Morbi adipiscing diam eget ipsum auctor hendrerit pellentesque sapien varius. Nam quis porta dolor. Donec ornare libero eu turpis volutpat non consequat elit egestas. Aliquam erat volutpat. Curabitur leo urna, commodo in accumsan a, vulputate ac nisi. Fusce porta facilisis sapien eget laoreet. Sed sapien ipsum, venenatis nec lobortis et, elementum et lacus.

Etiam quis nibh sit amet metus

Mauris tristique accumsan nibh, ut egestas urna laoreet at. Cras feugiat gravida nisl auctor mattis. Fusce at felis posuere metus imperdiet sagittis. Morbi adipiscing diam eget ipsum auctor hendrerit pellentesque sapien varius. Nam quis porta dolor. Donec ornare libero eu turpis volutpat non consequat elit egestas. Aliquam erat volutpat. Curabitur leo urna, commodo in accumsan a, vulputate ac nisi. Fusce porta facilisis sapien eget laoreet. Sed sapien ipsum, venenatis nec lobortis et, elementum et lacus.

Etiam quis nibh sit amet metus

Mauris tristique accumsan nibh, ut egestas urna laoreet at. Cras feugiat gravida nisl auctor mattis. Fusce at felis posuere metus imperdiet sagittis. Morbi adipiscing diam eget ipsum auctor hendrerit pellentesque sapien varius. Nam quis porta dolor. Donec ornare libero eu turpis volutpat non consequat elit egestas. Aliquam erat volutpat. Curabitur leo urna, commodo in accumsan a, vulputate ac nisi. Fusce porta facilisis sapien eget laoreet. Sed sapien ipsum, venenatis nec lobortis et, elementum et lacus.

Etiam quis nibh sit amet metus

Mauris tristique accumsan nibh, ut egestas urna laoreet at. Cras feugiat gravida nisl auctor mattis. Fusce at felis posuere metus imperdiet sagittis. Morbi adipiscing diam eget ipsum auctor hendrerit pellentesque sapien varius. Nam quis porta dolor. Donec ornare libero eu turpis volutpat non consequat elit egestas. Aliquam erat volutpat. Curabitur leo urna, commodo in accumsan a, vulputate ac nisi. Fusce porta facilisis sapien eget laoreet. Sed sapien ipsum, venenatis nec lobortis et, elementum et lacus.

Etiam quis nibh sit amet metus

Mauris tristique accumsan nibh, ut egestas urna laoreet at. Cras feugiat gravida nisl auctor mattis. Fusce at felis posuere metus imperdiet sagittis. Morbi adipiscing diam eget ipsum auctor hendrerit pellentesque sapien varius. Nam quis porta dolor. Donec ornare libero eu turpis volutpat non consequat elit egestas. Aliquam erat volutpat. Curabitur leo urna, commodo in accumsan a, vulputate ac nisi. Fusce porta facilisis sapien eget laoreet. Sed sapien ipsum, venenatis nec lobortis et, elementum et lacus.

The end.