How To Create A Two Column Layout - W3Schools

Trang chủ » Html Css Div 2 Column Layout » How To Create A Two Column Layout - W3Schools

Có thể bạn quan tâm

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

<div class="row"> <div class="column"></div> <div class="column"></div></div>
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 ❯ ★ +1 Track your progress - it's free! Log in Sign Up

Từ khóa » Html Css Div 2 Column Layout