N ways to achieve two-column layout with CSS

N ways to achieve two-column layout with CSS

1. What is a two-column layout?

There are two types of two-column layouts, one is a fixed width on the left and adaptive width on the right, and the other is that both columns are adaptive (that is, the width of the left is determined by the child elements, and the remaining space is filled on the right). It is a frequently asked question in CSS interviews and a skill that a front-end development engineer must master. The implementation methods will be introduced below.

2. How to achieve fixed width on the left and adaptive width on the right?

1. Double inline-block

Principle: Both elements are set to dislpay:inline-block. In order to eliminate the influence of HTML spaces, the font-size of the parent element needs to be set to 0, and the width of the adaptive element on the right is calculated using the calc function. If the heights of two elements are different, you can set vertical-align: top to adjust them.

Disadvantage: Since the font-size of the parent element is set to 0, the text in the child element will not be displayed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		   *{
			   padding: 0;
			   margin: 0;
		   }
			.box{
				height: 600px;
				width: 100%;
				font-size:0;
			}
			.left{
				display: inline-block;
				width: 100px;
				height: 200px;
				background-color: red;
				vertical-align: top;
				
			}
			.right{
				display: inline-block;
				width: calc(100% - 100px);
				height: 400px;
				background-color: blue;
				vertical-align: top;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div>
				<span>1234</span>
			</div>
			<div>
				<span>1234</span>
			</div>
		</div>
	</body>
</html>

2. Double floating

Principle: Two elements are set to float, and the width of the adaptive element on the right is calculated using the calc function

Disadvantage: Parent element needs to clear float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;

			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				float: left;
				width: calc(100% - 100px);
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<span>
					123adadadddddddddddddddddddddddddddddddddddddd
				</span>
			</div>
			<div></div>
		</div>
	</body>
</html>

Principle: The fixed-width element on the left floats, and the adaptive element on the right sets the margin-left value to be greater than the width of the fixed-width element.

Disadvantage: Parent element needs to clear float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;

			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				margin-left: 100px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<p>1234</p>
			</div>
			<div>
				<p>1234</p>
			</div>
		</div>
	</body>
</html>

4. Floating + BFC

Principle: Set overflow:hidden on the parent element, float the fixed-width element on the left, and set overflow:auto on the adaptive element on the right to create a BFC

Disadvantage: If the content of the left element exceeds the set width, it will overlap the right element

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				overflow: hidden;
			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				overflow:auto;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>11111111111111111111111</div>
			<div>1111111111111111111111111111111111111111</div>
		</div>
		<div></div>
	</body>
</html>

5.absolute+margin-left

Principle: The parent element is relatively positioned, the element on the left is absolutely positioned, and the value of margin-left of the adaptive element on the right is set to be greater than the width of the fixed-width element

Disadvantage: The parent element is set to relative positioning

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				position: relative;
			}
			.left{
				position: absolute;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				margin-left: 100px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

6.Flex layout

Principle: The parent element sets display: flex, and the adaptive element sets flex: 1

Disadvantages: There are compatibility issues, and IE10 and below do not support

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				display: flex;
			}
			.left{
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				flex: 1;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

3. Elements on both sides are adaptive

Strictly speaking, both elements are not adaptive, but the fixed width above is changed to be expanded by the child element.

1. Floating + BFC

The principle is the same as above, except that the width of the left element is not set and is expanded by the child elements.

2. Table layout

Principle: The parent element is display:table, and the left element is wrapped with a div. The div is set to display:table-cell and width:0.1% (to ensure the minimum width). Margin-right is set inside the left element, and display:table-cell is set on the right element.

Disadvantages: IE7 and below do not support it. When display:table is used, padding is invalid, the line-height property of the parent element is invalid, and when display:table-cell is used, margin is invalid.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				display: table;
				width: 100%;
				
			}
			.box{
				display: table-cell;
				width: 0.1%;
			}
			.left{
				margin-right: 20px;
				background-color: red;
				height: 200px;
			}    
			.right{
				display: table-cell;
				background-color: blue;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>126545453dddddddd453453453</div>
			</div>
			<div>12121</div>
		</div>
	</body>
</html>

3.Flex layout

The principles and shortcomings are the same as the flex layout above.

4. Grid layout

Principle: The parent element sets display: grid, grid-template-columns: auto 1fr; (this attribute defines the column width, the auto keyword means that the browser determines the length by itself. fr is a relative size unit, indicating that the remaining space is divided equally) grid-gap: 20px (row spacing)

Disadvantages: poor compatibility, IE11 does not support it, only Google 57 and above can support it

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				display:grid;
				grid-template-columns:auto 1fr;
				grid-gap:20px
			}  
			.left{
				background-color: red;
				height: 200px;
			}
			.right{
				height:300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>111111111111111111111111</div>
			<div></div>
		</div>
	</body>
</html>

This concludes this article about N ways to achieve two-column layout with CSS. For more relevant CSS two-column layout content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  HTML+CSS+JS realizes the scrolling gradient effect of the navigation bar

>>:  How to play local media (video and audio) files using HTML and JavaScript

Recommend

How to package the uniapp project as a desktop application

Installing Electron cnpm install electron -g Inst...

How to use the dig/nslookup command to view DNS resolution steps

dig - DNS lookup utility When a domain name acces...

A brief discussion on the implementation of fuzzy query using wildcards in MySQL

In the MySQL database, when we need fuzzy query, ...

Introduction and installation of MySQL Shell

Table of contents 01 ReplicaSet Architecture 02 I...

A Brief Analysis of the Differences between “:=” and “=” in MySQL

= Only when setting and updating does it have the...

...

Detailed explanation of installing redis in docker and starting it as a configuration file

Update: Recently, it was discovered that the serv...

Summary of MySQL composite indexes

Table of contents 1. Background 2. Understanding ...

Installation tutorial of mysql 8.0.11 compressed version under win10

This article shares the installation tutorial of ...

In-depth explanation of MySQL isolation level and locking mechanism

Table of contents Brief description: 1. Four char...

Centos8.3, docker deployment springboot project actual case analysis

introduction Currently, k8s is very popular, and ...

Understanding MySQL precompilation in one article

1. Benefits of precompilation We have all used th...

Linux loading vmlinux debugging

Loading kernel symbols using gdb arm-eabi-gdb out...

MySQL updates a field in a table to be equal to the value of a field in another table

As shown below: update table1 as z left join tabl...

Vue implements horizontal beveled bar chart

This article shares the specific code of Vue to i...