Skip to main content

5 ways to achieve two-column layout

· 2 min read

How well you know CSS layouts determines how fast you can develop pages in Web development. As Web technology continues to evolve, there are countless ways to implement layouts.

If you want to achieve three-column layout, you can read this article 3 ways to achieve three-column layout.

Here are six ways to implement a two-column layout that I hope will help you.

What is a two-column layout?​

A two-column layout is an adaptive layout with a column of constant width (or possibly width determined by child elements). The final effect looks like this:

Let's say we have this basic HTML structure.

.container {
  width: 100%;
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
.right {
  height: 400px;
  background-color: #c0eb75;
  font-size: 70px;
  line-height: 400px;
}
/* when float left, clear both is to deal with height 0 */
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
<div class="container clearfix">
  <div class="left">200px width</div>
  <div class="right">auto fill width</div>
</div>

float with calc​

Complete the following steps.

  • float the left column
  • float the right column
  • The width of the right column is 100% of the parent minus the width of the left column

The complete code is as follows.

.left {
  float: left;
}
.right {
  float: left;
  width: calc(100% - 200px);
}

float with marginLeft​

Complete the following steps.

  • float the left column
  • The right column set the left margin to 200px.

The complete code is as follows.

.left {
  float: left;
}
.right {
  margin-left: 200px;
}

absolute with marginLeft​

The same as float with marginLeft, you can set the left columns to absolute.

.left {
  position: absolute;
}
.right {
  margin-left: 200px;
}

flex layout​

flex layout is a new layout property supported by modern browsers, which makes it very convenient to use flex for layout.

.container {
  display: flex;
}
.right {
  flex: 1;
}

Pretty simple, right?

grid layout​

grid layout also is a convenient way to implement a two-column layout. It is very similar to flex layout. The complete code is as follows.

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

This article is original, without authorization, any media or personal we media and any statement reproduced

Commercial infringement will be investigated, if you need authorization please contact[email protected]

The original link:https://www.jstyro.com/blog/two-column-layout

Buy me a coffee