CSS Multi-column Layout Tutorial

CSS margin-top Property

The margin-top property sets the top margin of an element.

Note: Negative values are allowed.

Default value:	0
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.marginTop=»100px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
length	Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units	Demo ❯
%	Specifies a top margin in percent of the width of the containing element	Demo ❯
auto	The browser calculates a top margin	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

Look at the following example:

Example

In the example above, the

element has a top and bottom margin of 20px.

More Examples

Example

Set the top margin for a

element to 10% of the width of the container:

Example

Set the top margin for a

element to 2 em:

Источник

Multi-Column Layout With CSS

A familiar technique of newspapers and magazines is to break longer text areas up into two or more columns. The reason for this is because of the text is running quite long across a given area, it can sometimes cause people to lose track of where the next line is. With the CSS Multi-column Layout Module Web professionals can now also apply a column layout to an area of text using just a bit of CSS styling. Multi column layouts in CSS are also responsive automatically, so often you can wind up with two or three columns on a laptop or tablet, while a mobile device might have only one column.

Adding A Column Effect To An Article

Let’s first look at the markup we’ll use to get started. It consists of an tag with a few and

elements contained within the .

     
Operating Systems
 
Operating systems come in all shapes and sizes. Most of the operating systems in the world are Windows and Linux. Windows is a Microsoft production while Linux is open source with companies like Ubuntu, Red Hat, and others supporting it.
 
Better to use some text about operating systems in this section here before moving on to application software in the next section. Many web servers run on Ubuntu while office workers often make use of Windows operation systems.
 
Application Software
 
Application software is another type of software and it runs on top of the operating system. Microsoft Office is probably the most used application software in the business world. Adobe are the makers of application software for creative types.
 
Those applications for creativity include things like Adobe Photoshop, Illustrator, Dreamweaver, and many others. Still other application software may be software such as customer relationship management software that companies may use to track the day to day business.
 
  

Here is the layout of our article, before applying any column effects.

Now there are a couple of ways to turn on multiple columns in your layout. You start by targeting the element you would like to break up into columns, then apply either the property of column-width or column-count . The column-width property simply creates as many columns as will fit the available space. column-count on the other hand simply creates the number of columns you specify.

column-width

• Values:width
• Default:auto
• Applies to: block-level elements, table cells, and inline-block elements

column-count

• Values:integer
• Default:auto
• Applies to: block-level elements, table cells, and inline-block elements

Now let’s turn that article into a three column layout and make use of the column-count property to do so. This property always accepts an integer that is positive and can not be fractional. So for example, 1, 2, 3, etc… Browsers will adjust the width of each column dynamically to fit the width the device allows.

Let’s also add just lightest of blue backgrounds to the tag so we can see the exact area it occupies on the screen.
css

Our other option for turning on columns is that column-width approach. We can first try a value of say 150px and the browser will create as many columns as it can fit in the element. If there is any extra space, the column widths expand dynamically to fit the available space.

If we shrink the viewport, now the layout only has two columns since that is all that fits. This is a nice built in responsive feature of the CSS Multi-column Layout Module.

The columns Property as shorthand

You may also specify columns on an element using the columns property. The neat thing about the columns property is that you can either specify a count like 1 or 2, or you can specify a width like 300px. Either will work. Additionally, you can specify both count and width at the same time. For example columns: 3 200px;. With this approach, all columns will be 200px wide, but if the width of the viewport gets really wide allowing for say 5 or 6 columns – the fact that 3 had been specified sets a maximum amount of columns.

A very wide viewport still only displays three columns when using columns: 3 200px;.

Notice if we now omit the count of 3 and use columns: 200px; as the rule, we now have as many 200px wide columns as will fit.

How CSS Columns Work

The multi column layout in CSS now has a new container which exists between the content box and the content and is called the column box. These boxes are arranged in a left to right layout with all column boxes in the containing element having the same width and height. Height adjusts dynamically allowing the text to be spread out even across all columns. For the most part, column boxes are similar to block level elements. Some things that are different about column boxes however are that they do not have any padding, border, or margin like a standard block level element. Additionally, each column box can not have it’s own background color. In multi-column layouts, padding and margins are applied to the containing element box, not its columns.

Controlling Space Between Columns

You can control the size of the gap between columns by using the column-gap property. If you would like to create a visible line between columns, the column-rule property has your back. Here we set the column-gap to 4em.

Now let’s add a vertical line between columns using the column-rule property like so.

Note: The column-rule property is shorthand for column-rule-style, column-rule-color, and column-rule-width. All of these properties work just like the border-* properties, so if you know how to use borders in CSS, you can apply the same techniques to column rules.

Images In Multi-Column CSS Layouts

You may add images as well to your multi column css layout. A good idea is to set the width of each image to 100% and they will resize automatically to fill the column from edge to edge. We’ll add an image under the Operating System heading and the Application Software heading.

 
Operating Systems
 
Operating systems come.
 
Better to use some text.
 
Application Software
 
Application software is.
 
Those applications for.
 

Changing to a two column layout shows the images still look nice and fill the width of each column.

Fixing First Column Margin

You may have noticed that in all the examples so far, the first column always has a little bit of a margin area before the content begins. All of the remaining columns end up having content that goes right up to the top of the column. To fix this, we can simply apply a margin-top 0; to all elements inside the column container. In our case, that is .

Now the content lines up better across all of the columns!

Tip: Never explicitly set a height on the containing column element. This can limit the amount of space available to distribute content across all of the columns. If there is not enough space, the browser will create spillover like overflow columns outside of the column container. This will likely cause scrollbars to appear as well, and generally just doesn’t work that great. Here is what this condition looks like.

The column-fill property

If setting height on the column box is needed for one reason or another, you will want to know about the column-fill property. Browsers will try to balance the content between columns automatically for you by resizing the height of the column container. All of the examples so far have demonstrated this. If you do set that height however, there may be times when there is not enough content to fill all of the columns. In this scenario you can control how the content is balanced across the columns using column-fill. The three possibilities are auto, balance, or balance-all. The default is balance.

Consider we now have a height of 650px on the container and column-fill is set to balance.

What happens is the full height of the container is presented as you can see by the light blue background. The content however balances across all three columns, leaving empty space in the lower half of each column.

The other option is to set column-fill to auto. This has the effect of filling each column top to bottom entirely before moving to the next column. Now, all three columns are presented however there is only enough content to fill the first two.

How To Span Columns

With the column-span property you can create some really cool effects with an element inside of the column container. Essentially, you can apply something like column-span: all; to an element and it will break out of the column box and span all they way across all columns. The effect this has is to create a horizontal divider of sorts with the top columns being related and the bottom columns being related. In the markup, we have added a new paragraph highlighted below:

 
Operating Systems
 
Operating systems come in.
 
Better to use some text about operating.
 
Application Software 
Application software is another type.
 
Those applications for creativity.
 

Here is the css for the .spancolumns class. Most of it is for styling, but pay attention to the column-span property.

Multi-Column Layout With CSS Summary

In this tutorial we learned all about multi columns layouts using nothing but CSS. The CSS Multi-column Layout Module is what makes this type of layout possible. The properties below are some of the ones we used to demonstrate the code examples above.

• column-count Sets the number of columns an element should be divided into
• columns Can use this instead of column-count if you like
• column-fill If a height is set to a multi column element, this controls how content fills the columns
• column-gap Sets the width of the gap between columns
• column-rule Shorthand for column-rule-style, column-rule-width, and column-rule-color. Sets the style of the rule between columns.
• column-span You can make an element span all columns with this
• column-width You can set exact column widths if you like

Источник