Contact Us

CSS Multi-Column Layout Property

Designing webpages and its layouts has come a long way in the last decade, using horrible table layouts and pages split apart by frames.

Next came div layouts and now we have another way of dealing with our web page layouts in the form of  Multi-Column Layout.

CSS page layouts should always have been a lot simpler than they are up to now. Thankfully, the new, fresh specs will enable layout creation to become much simpler for web designers.

The W3C has helped to give us more standards and implementations in the major browsers for these new layout options that can be used today. The W3C currently considers the CSS3 Multi-Column Layout Module to be a Recommendation, meaning that the W3C believes it has got to the point where the W3C is happy for browsers to start using these features. With this in mind, let’s move forward.

Prefixed Vendor Functions

Although other parts of the specification haven’t become a Recommendation for the W3C, that doesn’t mean we can’t use them today in our projects. These days, vendor prefixes are a way of using specific functions that may be subject to possible change in future or may be completely removed once the spec and implementation are stable.

Basically, vendor prefixes enable browser developers to test out new functions without changing the spec and warn web developers, like me and you that a particular function is not quite finished yet.

Some people love vendor prefixes and some hate them. It is advised that you use them with a little cunning and we’ll be looking here at some of these that you can start to try out in your projects now.

Multi-Column Layout

The multi-column layout module enables us to use columns in our web pages without having to worry about floats and positioning. It also allows you to create a correct amount of columns dependent upon the screen size. Using the example below you can create something that has a column width of 20ems. You could equally use pixels and this would let the browser create as many columns as the users display allows:

#some_element { column-width: 20em; }

You can also set how many columns there should be, in this example the widths of the columns will be distributed evenly based on the width of the container

#some_element { column-count: 4; }

You can of course, control everything with closer control. In the example below, we will define how many columns we have, each columns width and the styles between each column:

#some_element {

columns: auto 20em;
column-gap: 1em;
column-rule: 1em solid black;

}

There are other properties that you can use to set the rules on how columns break, how an element can span across more than one column and balance content equally among all columns.

If you would like any help with your web design or development projects then why not get in contact with us here at Network Intellect

This article was posted by



Leave a Reply

What our clients say

"It’s like having your own in-house digital marketing consultancy rather than an external company. I no longer think about them as a supplier. They’re part of the team."
Marketing Manager, Education
"They have always been professional and focused on delivering results in a timely and cost effective manner. It is enlightening to have an organisation that takes the time to make recommendations on actual data analysis."
Business Manager, Charity
"They (Network Intellect) continue to exhibit their digital expertise by helping us to establish a competitive advantage by pushing the boundaries and innovating their technology and performance solutions."
Head of Marketing Communications, Education
"Because of their talent, expertise and level of service our on-line business has increased dramatically."
Founder, Electronics
"I would have no hesitation in recommending them as an analytics partner to understand and improve the performance of a website."
Vice President, Retail
Network Intellect continue to give us a fantastic service, fast and friendly and are always ready to go the extra mile. They have gone above and beyond the call of duty to deliver our results.
Director, E-Cigarette Web
"We found that Network Intellect had the depth of knowledge we needed and after speaking to them a few times we decided to go with them. It’s the best decision we’ve made in some time."
Owner, Retail
"Their services offered great value for money. I would not hesitate to recommend them as a digital partner to others."
Strategic Marketing Manager, Education
"Jason and his team at Network Intellect embody efficiency and efficacy. I would have no hesitation in recommending this excellent company to others."
Marketing Manager, Education
Network Intellect have managed our product data feeds with exceptional care and meticulous detail. I know I can trust them to make the right decisions for our business."
Director, E-Commerce
"It’s like having your own in-house digital marketing consultancy rather than an external company. I no longer think about them as a supplier. They’re part of the team."
Marketing Manager, Education
Read all testimonialsRead all testimonials

We can help you be great

We have friendly staff ready to help you get on your path to greatness...
Network Intellect Menu