Css any order columns

columns

The columns CSS shorthand property sets the number of columns to use when drawing an element’s contents, as well as those columns’ widths.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Column width */ columns: 18em; /* Column count */ columns: auto; columns: 2; /* Both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* Global values */ columns: inherit; columns: initial; columns: revert; columns: revert-layer; columns: unset; 

The columns property may be specified as one or two of the values listed below, in any order.

Values

Formal definition

• column-width : auto
• column-count : auto

• column-width : the absolute length, zero or larger
• column-count : as specified

• column-width : a length
• column-count : an integer

Formal syntax

Examples

Setting three equal columns

HTML

p class="content-box"> This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns. p> 

CSS

.content-box  columns: 3 auto; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS Floats to Display Columns in Any Order

With my publisher’s permission, I’m sharing the following excerpt from my latest book, CSS Cookbook, Second Edition, which discusses a neat trick for designing multi-column layouts in any order.

Problem

You want to develop a system to display content in columns in any order.

Solution

Given the following markup:

Apply the following CSS rules:

 .column < float: left; >#content < margin-left: 20%; width: 60%; >#navigation < margin-left: -80%; width: 20%; >#related-info < width: 19%; >/* IEx patches */ * html .column < display: inline; >* html #navigation li < height: 1%; >/**/ 

This will yield the basic page layout that you see in Figure 9-18, with two narrow, flexible-width sidebars bounding an equally flexible center column (see Figure 9-18).

From this rather bland foundation, you can layer additional CSS on top of it. Adding the following code to your CSS will yield a design like Figure 9-19:

 body < font: normal 62.5%/1.7 Verdana, Geneva, Helvetica, Arial, sans-serif; margin: 0; padding: 0; >#container:after < clear: both; content: "."; display: block; height: 0; visibility: hidden; >#container < display: inline-block; >/* Hide from MacIE5 */ #container < display: block; >/**/ #container-outer < background: url("bg-left.gif") repeat-y 20% 0; >#container < background: url("bg-right.gif") repeat-y 80% 0; >.column .wrap < padding: 20px; >#content .wrap < padding: 20px 30px; >#content p < margin-top: 0; >#content p:first-child < font: normal 1.4em/1.6 Georgia, Times, "Times New Roman", serif; >#content p:first-child:first-line < text-transform: uppercase; >#navigation ul, #navigation ul li < list-style: none; margin: 0; padding: 0; >#navigation ul li < margin-bottom: .4em; >#navigation li a < background: #36C; color: #FFF; border-left: 7px solid #09F; display: block; padding: .4em .4em .4em 20px; text-decoration: none; >#navigation li a:hover < border-left: none; border-right: 7px solid #09F; padding-left: 27px; >#related-info < color: #555; font-style: italic; >#copyright < border: 1px solid #B2B2B2; border-width: 1px 0; clear: both; padding: 10px 20px; text-align: center; >#copyright p

Discussion

The float model has a storied history. The authors of the CSS specification never intended floats to be used for page-level layout control: rather, they were a means to control the flow of content around an object, much as align=»left» or align=»right» would cause text to wrap around an img element. But despite the specification’s original spirit, floats do offer us a powerful and flexible alternative to traditional, table-based layout techniques.

Alex Robinson, a designer, published an influential article on creating the “Any Order Columns” in CSS. Robinson’s technique allows developers to create multicolumn layouts easily by using floats to display each column in any order, regardless of the order in which those blocks appear in the markup.

The Markup

To work with this technique, first you need to establish columns in your markup, like so:

  
 
[. ]
  
[. ]
  
[. ]
 
  
Copyright notice goes here.
 
 

Inside each div , place any markup you would like. Figure 9-20 shows what the unstyled document looks like, with a few paragraphs and an unordered list thrown in for good measure.

From this demonstration so far, a div element is set up for each of your three columns, and each is assigned an id that describes the kind of content that will be placed inside. In this solution, the values for id are content , navigation , and related-info . It would have been just as easy to use center , left , and right , but that wouldn’t have been especially forward-thinking: what happens when you change your site’s CSS file, and the new design requires the “left” div to appear on the righthand side of the page?

Defining the Columns

With this simple markup structure in place, you can apply a generic float rule to all three column div s:

As you see in Figure 9-21, the layout does not look drastically different. The copyright text is a bit out of alignment, but the bulk of your page appears as it did before with each column div stacking horizontally. Once dimensions are assigned to these blocks, however, things rapidly change.

First, start with the content block. To set the block to be 60% of the window width, and the width of the lefthand sidebar to be 20% of the screen, create the following rule:

Figure 9-22 shows that the layout is looking a bit odd, but starting to take shape.

By setting a lefthand margin equal to the width of your lefthand sidebar, you’ve essentially “reserved” some space for it. The next step is to use negative margins to “pull” the navigation div across the content div to the lefthand side of the page:

The margin-left value applied is a sum of the width of the center column (60%) and its lefthand margin (20%). This pulls the navigation column over to its proper place (see Figure 9-23).

Now, simply by setting a width on the related-info block, the three-column layout is complete, as shown in Figure 9-24:

Looks excellent, although the copyright div is still a bit off. But with the clear property, that’s easily fixed (see Figure 9-25):

Although the layout may look as though your columns are nearly complete, Figure 9-26 shows you that Internet Explorer on Windows needs a little extra attention.

Thankfully, this is a documented IE bug known as the “Doubled Float-Margin Bug”: essentially, when a margin is applied to a floated box in the same direction as the float, that margin is doubled in size.

Since a lefthand margin is applied to a left-floated element, IE on Windows takes that 20% margin and doubles it to 40%.

Thankfully, the fix is a simple one. By applying display:inline to the problematic element, Internet Explorer behaves again. To do this, add the following lines to your CSS:

 /* IEx patches */ * html .column < display: inline; >/**/ 

The oddly formatted comments and * html prefix ensure that this code is seen by IE on Windows, and IE on Windows alone. And as Figure 9-27 shows, IE is behaving properly.

So you’ve arrived at last: a flexible, three-column layout template. But where else can you take this?

Creating Whitespace

The space between the columns is called a gutter. To customize this layout by increasing the size of the gutters, an approach would be to apply some margins around the columns. There are a number of ways to achieve this effect, but first start by adding an additional div to each of your columns, like so:

With your “wrap” div s in place, apply padding to them with CSS to create more breathing room (see Figure 9-28):

Adjusting the Order of Columns

As you may have noticed by now, the “Any Order Columns” method is grounded in the intelligent use of margins : positive margins are used to reserve space, while negative margins are used to “pull” columns out of their natural position.

Now simplify the CSS for a moment, and remove all the column margins:

 #content < width: 60%; >#navigation < width: 20%; >#related-info

As a result, your layout now looks like Figure 9-29, with each column appearing in its natural position in the float order.

By adding a lefthand margin to your navigation div , and then by using a negative lefthand margin to move your related-info div , you can essentially reverse the order of the second two columns. With the following CSS, you’re left with a layout like Figure 9-30:

#content < width: 60%; >#navigation < margin-left: 20%; width: 20%; >#related-info

And to complete the demonstration, place the content column on the righthand side of the page, as shown in Figure 9-31.

To do so, apply the following code:

 #content < margin-left: 40%; width: 60%; >#navigation < margin-left: -100%; width: 20%; >#related-info

As with the first layout, you’ve applied a margin to the content column in order to “reserve” some whitespace on the lefthand side of our page. Then, you’ve used negative lefthand margins to pull the navigation and “related information” div s into the proper location.

Page Layout Algorithm

A simple way to calculate rearranging columns is to follow a somewhat simple algorithm used to calculate the negative margins for a column:

1. For the column you want to determine its negative margin, first calculate the rightmost point for all columns that precedes it in the source code.
2. Then specify the leftmost point for the column.
3. Finally, subtract the rightmost value from the leftmost to give the left margin for the element.

If this technique doesn’t work, there’s always good ol’ trial and error.

Faking Columns

Now return to your first layout (see Figure 9-32), and see how you can make your columns feel, well, a bit more polished. The first step? Background images.

“Faux columns” is a technique developed by web designer Dan Cederholm that utilizes a horizontally repeating background image.

By using one tiled image, Cederholm’s method works incredibly well in a fixed-width design: however, the technique’s versatility means that it needs only slight modification to work in our fully flexible layout.

First, you need two images, one for each side of the content column. Figure 9-33 shows the lefthand graphic, while Figure 9-34 shows the right.

Next, you’ll need to wrap your container block in an extra div , like so:

  
 
[Rest of template goes here]
 
 

And finally, you’ll need to add the following rules to your style sheet:

 #container:after < clear: both; content: "."; display: block; height: 0; visibility: hidden; >#container < display: inline-block; >/**/ #container < display: block; >/**/ /**//*/ #container < display: inline-block; >/**/ #container-outer < background: url("bg-left.gif") repeat-y 20% 0; >#container

With this code in place, the columns appear as full-length columns, like the ones in Figure 9-35.

From here, feel free to add any typographic styles you’d like; the ones supplied in the Solution section of this recipe will do nicely, and will yield the finished design shown in Figure 9-36.

An Alternative Solution

The float model for laying out pages is powerful, but floats can have a rather steep learning curve. As a result, many designers find absolute positioning to be an attractive alternative, enabling them to precisely position the different components of their design with x– and y-coordinates.

Unfortunately, positioned elements are taken “out of the document flow,” which effectively collapses their containing element. As a result, “positioned” designs lack the powerful float concept of clearing, which enables the different parts of your designs to be “context-aware”: that is, a footer div (such as the copyright block in the solution, earlier) can be cleared of the floated blocks above it, but not of any positioned elements on the page.

Shaun Inman, a talented web designer/developer, has written a lean JavaScript function to fix this problem. When inserted into your web pages, Inman’s script will automatically “clear” elements of any other positioned elements on the page (see Figure 9-37).

The only potential drawback to this method is that it does rely on JavaScript being active in the user’s browser. But if your content is accessible if you disable JavaScript in your target browsers during testing, then all should be well.

Источник

order

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

Try it

Syntax

/* values */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: revert; order: revert-layer; order: unset;

Since order is only meant to affect the visual order of elements and not their logical or tab order. order must not be used on non-visual media such as speech.

Values

Represents the ordinal group to be used by the item.

Accessibility concerns

Using the order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

Formal definition

Initial value	0
Applies to	Flex items, grid items, and absolutely-positioned flex and grid container children
Inherited	no
Computed value	as specified
Animation type	an integer

Источник