How TO - Two Column Layout

❮ Previous Next ❯

Learn how to create a 2-column layout grid with CSS.

Column 1

Some text..

Column 2

Some text..

Try it Yourself »

How To Create a Two Column Layout

Step 1) Add HTML:

Example

Step 2) Add CSS:

In this example, we will create two equal columns:

Float Example

.column {
float: left;
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

Try it Yourself »

A modern way of creating two columns, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions.

Flex Example

.row {
display: flex;
}

.column {
flex: 50%;
}

Try it Yourself »

It is up to you if you want to use floats or flex to create a two-column layout. However, if you need support for IE10 and down, you should use float.

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

In this example, we will create two unequal columns:

Example

.column {
float: left;
}

.left {
width: 25%;
}

.right {
width: 75%;
}

Try it Yourself »

In this example, we will create a responsive two column layout:

Example

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Try it Yourself »

Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.

Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.

❮ Previous Next ❯