Column layout with css

CSS Website Layout

A website is often divided into headers, menus, content and a footer:

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Example

Header

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav overflow: hidden;
background-color: #333;
>

/* Navbar links */
.topnav a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Links — change color on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */
.column float: left;
width: 33.33%;
>

/* Clear floats after the columns */
.row:after content: «»;
display: table;
clear: both;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) .column width: 100%;
>
>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Example

/* Left and right column */
.column.side width: 25%;
>

/* Middle column */
.column.middle width: 50%;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) .column.side, .column.middle width: 100%;
>
>

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

Column layouts

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

You will often need to create a layout which has a number of columns, and CSS provides several ways to do this. Whether you use Grid, Flexbox or Multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.

Requirements

There are a number of design patterns you might want to achieve with your columns:

• A continuous thread of content broken up into newspaper-style columns.
• A single row of items arranged as columns, with all heights being equal.
• Multiple rows of columns lined up by row and column.

The recipes

You need to choose different layout methods in order to achieve your requirements.

A continuous thread of content — multi-column layout

If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.

You can control the gaps between columns with the column-gap property, and add a rule between columns using column-rule .

• You want your text to display in newspaper-like columns.
• You have a set of small items you want to break into columns.
• You do not need to target individual column boxes for styling.

A single row of items with equal heights — flexbox

Flexbox can be used to break content into columns by setting flex-direction to row , however flexbox targets the elements inside the flex container and will place each direct child into a new column. This is a different behavior to what you saw with multicol.

There is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. Therefore to create gaps between items use a margin.

Flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the flex-wrap property on the container to wrap . These new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you’ll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.

• For single rows or columns of items.
• When you want to do alignment on the cross axis after laying out your items.
• When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.

Lining items up in rows and columns — grid layout

If what you want is a layout where items line up in rows and columns then you should choose CSS Grid Layout. Grid Layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with CSS Grid you can line your items up in rows and columns — it is described as two-dimensional.

• For multiple rows or columns of items.
• When you want to be able to align the items on the block and inline axes.
• When you want items to line up in rows and columns.

Browser compatibility

css.properties.column-width

BCD tables only load in the browser

css.properties.column-rule

BCD tables only load in the browser

css.properties.flex

BCD tables only load in the browser

css.properties.flex-wrap

BCD tables only load in the browser

css.properties.grid-template-columns

BCD tables only load in the browser

Resources on MDN

Found a content problem with this page?

This page was last modified on Feb 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 multi-column layout

The CSS multi-column layout module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.

Multi-column layout in action

In this example, the 1967 speech from Canada’s centennial, A Lament for Confederation, by Chief Dan George, is displayed across multiple columns, similar to the way articles are displayed in printed newspapers. If you have JavaScript enabled, controls enable changing the preferred column number and width, the width of the gap between columns, whether the title and a sample blockquote should be contained in a single column or made to span all columns, and whether breaking within the paragraphs should be avoided.

To see the code for this columned layout, view the source on GitHub.

Note: Multiple-column layout is closely related to paged media. Each column box is a fragment, much like each printed page is a fragment of a document. Using the properties defined in the CSS fragmentation module, you can control how content breaks between columns and pages.

Reference

Properties

• break-after
• break-before
• break-inside
• column-fill
• column-gap
• column-span
• column-rule shorthand
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-count
  • column-width

  Note: Bear in mind that setting container height and line length can pose challenges for people with visual or cognitive disabilities. WCAG Success Criterion 1.4.8 states that even when the text size is doubled, content should not need to be scrolled.

  Guides

  An overview of the Multiple-column Layout specification

  How to use column rules and manage the spacing between columns.

  How to make elements span across all columns and control the way columns are filled.

  What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

  Introduction to the Fragmentation specification and how to control where column content breaks.

  Related concepts

  • orphans CSS property
  • widows CSS property
  • overflow CSS property
  • gap CSS property
  • height , max-height , and block-size CSS properties
  • width , max-width , and inline-size CSS properties
  • enumerated data type
  • Block formatting context guide

  Specifications

  See also

  Found a content problem with this page?

  This page was last modified on Jun 7, 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.

  Источник