Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS

Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS

7 ways to implement a two-column layout with fixed width on the left and adaptive width on the right using CSS. The code is as follows:

1. CSS code for calculating width using calc:

.box>div{height: 100%;}
#box1>div{float: left;}
.left1{width: 100px;background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}

DOM structure:

<div class="box" id="box1">
    <div class="left1">Fixed width on the left</div>
    <div class="right1">Adaptive on the right</div>
</div>

2. Use float and margin to implement CSS code:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{background: #09c;margin-left: 100px;}

DOM structure:

<div class="box" id="box2">
    <div class="left2">Fixed width on the left</div>
    <div class="right2">Right side adaptive</div>
</div>

3. Use float and overflow to implement CSS code:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{background: #09c;overflow: hidden;}

DOM structure:

<div class="box" id="box3">
    <div class="left3">Fixed width on the left</div>
    <div class="right3">Right side adaptive</div>
</div>

4. Use position:absolute with margin to achieve

CSS code:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right4{margin-left:100px;background: #09c;}

DOM structure:

<div class="box" id="box4">
    <div class="left4">Fixed width on the left</div>
    <div class="right4">Right side adaptive</div>
</div>

5. Use position:absolute to achieve

CSS code:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}

DOM structure:

<div class="box" id="box5">
    <div class="left5">Fixed width on the left</div>
    <div class="right5">Right side adaptive</div>
</div>

6. Use display: flex to achieve

CSS code:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;background: yellow;}
.right6{flex:1;background: #09c;}

DOM structure:

<div class="box" id="box6">
    <div class="left6">Fixed width on the left</div>
    <div class="right6">Right side adaptive</div>
</div>

7. Use display: table to implement CSS code:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{width: 100px;background: yellow;}
.right7{background: #09c;}

DOM structure:

<div class="box" id="box7">
    <div class="left7">Fixed width on the left</div>
    <div class="right7">Right side adaptive</div>
</div>

This concludes this article about 7 methods to achieve a two-column layout with fixed width on the left and adaptive width on the right using CSS. For more relevant CSS two-column layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  HTML drag and drop function implementation code

>>:  Sample code for html list box, text field, and file field

Recommend

How to automatically delete records before a specified time in Mysql

About Event: MySQL 5.1 began to introduce the con...

Method to detect whether ip and port are connectable

Windows cmd telnet format: telnet ip port case: t...

Record a slow query event caused by a misjudgment of the online MySQL optimizer

Preface: I received crazy slow query and request ...

A brief discussion on the principle of js QR code scanning login

Table of contents The essence of QR code login Un...

Review of the best web design works in 2012 [Part 1]

At the beginning of the new year, I would like to...

Solution to Ubuntu not being able to connect to the Internet

Problem description: I used a desktop computer an...

Detailed explanation of Angular structural directive modules and styles

Table of contents 1. Structural instructions Modu...

Vue components dynamic components detailed explanation

Table of contents Summarize Summarize When the ar...

Docker installs and runs the rabbitmq example code

Pull the image: [mall@VM_0_7_centos ~]$ sudo dock...

Using cursor loop to read temporary table in Mysql stored procedure

cursor A cursor is a method used to view or proce...

Invalid solution when defining multiple class attributes in HTML

In the process of writing HTML, we often define mu...