Welcome Guest! (App Version 3.1)

websitnero logo name

Multiple Columns

Multiple Columns in CSS3

Have you ever wondered why newspapers have the text broken up in columns? It is to add readability for users. Since, newspapers do not have facility of mouse to slide your text or decrease window size, best method is that do not stretch lines of texts too long for user to continuously move his eyes from one end to other end of news paper.

It is evident that small columns of texts would help a user in reading more than long monotonous unbreaking lines having news written end to end to the width of a news paper.

But, what if you want to do very same effect on your website, ie, break you text in columns rather than complete row? Earlier, process was complicated where you would need to break divs into certain widths, then have them aligned next to each other by "display:inline-block", then add text and often use "word-break:break-all", and various other combinations to get the thing done! Alas, so much of hassle!

But, now in CSS3 you just can achieve all this by one simple property, just add column count and your text will automatically be broken in respective columns.

Example

<head>
<style>
p{
  column-count:3;
}
</style>
</head>

<body>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.