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

Detailed tutorial on installing Tomcat8.5 in Centos8.2 cloud server environment

Before installing Tomcat, install the JDK environ...

Installation steps of docker-ce on Raspberry Pi 4b ubuntu19 server

The Raspberry Pi model is 4b, 1G RAM. The system ...

UrlRewriter caching issues and a series of related explorations

When developing a website function, the session c...

XHTML Tutorial: XHTML Basics for Beginners

<br />This site’s original content, please i...

Ubuntu MySQL version upgraded to 5.7

A few days ago, the library said that the server ...

Alibaba Cloud applies for a free SSL certificate (https) from Cloud Shield

Because the project needs to use https service, I...

MySQL 8.0.11 Installation Guide for Mac

MAC installs mysql8.0, the specific contents are ...

CSS3 achieves various border effects

Translucent border Result: Implementation code: &...

What are the new features of Apache Spark 2.4, which will be released in 2018?

This article is from the Apache Spark Meetup held...

Simple Mysql backup BAT script sharing under Windows

Preface This article introduces a simple BAT scri...

Vue event's $event parameter = event value case

template <el-table :data="dataList"&...

How to delete folders, files, and decompress commands on Linux servers

1. Delete folders Example: rm -rf /usr/java The /...

How to use resident nodes for layer management in CocosCreator

CocosCreator version: 2.3.4 Most games have layer...