If you use float for a fixed-width div, the div is written before the adaptive div, but then the two divs are not on the same line, which is the downside of using float

Absolute can solve this problem, but using absolute, if the fixed broadband div is high, it will affect the layout behind it

So you also need to use floats, one to the left and one to the right, and then add another div to the adaptive div, which is very complicated

Final plan: \

<! DOCTYPEhtml>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>CSS with fixed width on the right and adaptive width on the left (final scheme)</title>  
    <style type="text/css">  
        .wrap {  
            max-width: 900px;  
            margin:0 auto;  
            overflow: hidden;  /* Clear the float and hide the part that moves out to the left */
        }  
     
        .content {  
            float: left;  
            width: 100%;  
            margin-left: -310px;  
            background-color: #eee;  
        }  
        .content-inner {  
            margin-left: 310px;  
            border: 1px solid green; 
        }          
        .sidebar {  
            float: right;  
            width: 300px;  
            height: 500px;
            background-color: gold;  
        }  
        .footer{margin:0 auto;max-width: 900px;height: 100px; background:green; }</style>  
</head>    
<body>     
    <div class="wrap">  
        <div class="content">  
            <div class="content-inner">Adaptive area where text wraps automatically when the browser width shrinks.</div>  
        </div>  
        <div class="sidebar">Fixed width area (float with margin)</div>  
    </div>       
    <div class="footer">At the bottom of the</div>   
</body>    
</html>
Copy the code

\

\

Preliminary exploration plan: \

<! DOCTYPEhtml>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>The CSS implements a fixed width on the right and an adaptive width on the left</title>
    <style type="text/css">
        .wrap {
            max-width: 900px;
            margin:0 auto 10px;
            border: 1px solid green;
            overflow: hidden;
        }
        .content ,.sidebar {
            background-color: #eee;
        }
        .sidebar {
            float: right; 
            width: 300px;
            background-color: gold;
        }
        .content {
            margin-right: 310px;
            background-color: #eee;
        }
        .sidebar2 {
            float: left;
            width: 300px;
            background-color: gold;
        }
        .content2 {
            margin-left: 310px;
            background-color: #eee;
        }  
        .wrap2 {
            max-width: 900px;
            margin:0 auto 10px;
            border: 1px solid green;            
            position: relative;
        }
        .content3 {
            margin-right: 310px;
            background-color: #eee;
        }
        .sidebar3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 300px;
            background-color: gold;
        }
        .content4 {
            margin-left: 310px;
            background-color: #eee;
        }
        .sidebar4 {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            background-color: gold;
        }    
        .content5 {
            float: left;
            width: 100%;
            margin-left: -310px;
            background-color: #eee;
        }
        .content5s {
            margin-left: 310px;
        }        
        .sidebar5 {
            float: right;
            width: 300px;
            background-color: gold;
        }    
        .content6 {
            float: right;
            width: 100%;
            margin-right: -310px;
            background-color: #eee;
        }
        .content6s {
            margin-right: 310px;
        }        
        .sidebar6 {
            float: left;
            width: 300px;
            background-color: gold;
        }  
        .wrap3 {
            display: table;
            max-width: 900px;
            width: 100%;
            margin:0 auto 10px;
            border: 1px solid green;            
        } 
        .content7 {
            display: table-cell;
            background-color: #eee;
        }
        .sidebar7 {
            display: table-cell;
            width: 300px;
            background-color: gold;
        }                           
    </style>
</head>  
<body>
    <div class="wrap">
        <div class="sidebar">Fixed width area (float)</div>
        <div class="content">Adaptive area where text wraps automatically when the browser width shrinks.</div>
    </div>
    <div class="wrap">
        <div class="sidebar2">Fixed width area (float)</div>
        <div class="content2">Adaptive area where text wraps automatically when the browser width shrinks.</div>
    </div>
    <div class="wrap2">
        <div class="content3">Adaptive area where text wraps automatically when the browser width shrinks.</div>
        <div class="sidebar3">Fixed width area (Absolute)</div>
    </div>  
    <div class="wrap2">
        <div class="content4">Adaptive area where text wraps automatically when the browser width shrinks.</div>
        <div class="sidebar4">Fixed width area (Absolute)</div>
    </div>  
    <div class="wrap">
        <div class="content5">
            <div class="content5s">Adaptive area where text wraps automatically when the browser width shrinks.</div>
        </div>
        <div class="sidebar5">Fixed width area (float with margin)</div>
    </div>  
    <div class="wrap">
        <div class="content6">
            <div class="content6s">Adaptive area where text wraps automatically when the browser width shrinks.</div>
        </div>
        <div class="sidebar6">Fixed width area (float with margin)</div>
    </div> 
    <div class="wrap3">
        <div class="content7">Adaptive area where text wraps automatically when the browser width shrinks.</div>
        <div class="sidebar7">Fixed width (display:table)</div>
    </div>   
    <div class="wrap3">
        <div class="sidebar7">Fixed width (display:table)</div>
        <div class="content7">Adaptive area where text wraps automatically when the browser width shrinks.</div>
    </div>                
</body>  
</html>  
Copy the code

\

\

If you don’t need a less compatible browser, you can use flex layout:

    <! DOCTYPEhtml>            
    <html>            
    <head>            
        <meta charset="UTF-8">        
        <meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">      
        <title>Flex layout</title>          
        <style type="text/css">    
            body{margin: 0}  
            /* flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; * /
            .m-flex{display: flex;flex-direction: row; }.m-content{flex:1;border:1pxsolid blue; }.m-right{flex:0 0 300px;border:1pxsolid blue; }</style>          
    </head>            
    <body>         
        <div class="m-flex">  
            <div class="m-content">Adaptive area where text wraps automatically when the browser width shrinks.</div>  
            <div class="m-right">Fixed width area (Flex)</div>  
        </div>   

    </body>            
    </html>  
Copy the code

\

Reference link: jo2.org/css-auto-ad…



\