HTML+CSS div solution when relative width and absolute width conflict

Div solution when relative width and absolute width conflict

Summary: Generally, we use px when using absolute width and % when using relative width, but what should we do if we use both absolute and relative widths at the same time?

Let's use an example to explain today's content:

1. Complete the questions on the picture
2. Try to provide a solution that makes the width equal to the screen width, and the layout is roughly similar to 1. Make sure that no matter how you adjust the width of the browser, the relative width of the middle layout does not change, and the spacing between grids is 10px.

Question 1 is very simple, and there are many solutions, so I won’t go into details.

Analyzing question 2, we found that there are two key requirements:
Relative width: the relative width (ratio) of the grid remains unchanged Absolute width: the absolute distance between grids remains unchanged

If you only care about relative width, then it is very simple, just set the width of the left grid to 30% (for example), and the width of each grid on the right to 70%; if you only care about absolute width, then it is even simpler, just set the distance in the middle to 10px. But what if you want to satisfy both at the same time? Do I have to write width: (inherit-10px)*30%?
Obviously not. Let me talk about my solution (I am a newbie, if there are any omissions, or if you have a better solution, please correct me in the comment section!)

First write out the general box framework

<!-- Tiger's Code World-->
<!doctype html>
<html>
<head>
    <title>Discussion on relative width and absolute width</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="top">
    </div>
    <div class="wrapper">
        <div id="left">
        </div>
        <div id="right">
        </div>
    </div>
    <div id="bottom">
    </div>
</body>
</html>

I will not go into details about the top and bottom containers. I'll just talk about the middle part.

First of all, it is clear that the problems of relative width and absolute width cannot be solved at the same time (1. As far as this question is concerned 2. Corrections are welcome)
Then we split the problem: solve the relative width first, then the absolute width, or solve the absolute width first, then the relative width. As far as this question is concerned, the former is simpler. How do we "split" the problem? ——Of course it’s the container div!

Let's solve the relative width first:
We merge A and C, and then describe them with B using relative width.

This is very simple, the width on the left is 30% and the width on the right is 70%
So how do we solve the layout in the left container?
Let's think about this first: Can we make a container with a grid of fixed width on the left and a grid of variable width on the right? Of course, this is the navigation bar! This is very simple, I just found a way to paste it below:

#left{
    height: 300px;
    float: left;
    width: 150px;
}

#right{
    height: 300px;
    width: auto;
    margin-left: 150px;
}

Wouldn't this solve the problem immediately?
So next time when you encounter a conflict between relative and absolute, be sure to use div as a powerful tool!

Of course, we also need to pay attention to some small details, such as how to deal with border issues, etc. This requires adjusting the height of the outer container and the inner container (the difference is 2*border-width), and in order to make the right container adapt to the left, another div needs to be placed inside the right.

The box model is the basic skill of CSS layout. Everyone must have a deep understanding of it before applying it to various transformations. To complete this question, you need to have a good understanding of the relationship between margin, padding (although it is not used in this question), border, and div. I will not talk about it in detail today and will talk about it next time when I have time.

I've pasted all my code below for your reference. If you have a better solution, please share it in the comment section!

HTML:

<!Tiger's Code World>
<!doctype html>
<html>
<head>
    <title>CSS layout exercise</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="top">
    </div>
    <div class="wrapper">
        <div id="left">
            <div class="innerright"></div>
            <div class="inner"></div>
        </div>
        <div id="right">
            <div class="inner"></div>
        </div>
    </div>
    <div id="bottom">
    </div>
</body>
</html>

CSS:

/*Tiger's code world*/

/*The width in the title is unclear whether it is the width with borders and margins or the width without borders and margins. The following defaults to the width without borders and margins*/


*{
    margin: 0px;
    padding: 0px;
    border-width: 3px;
    border-style: solid;
    border-color: black;
}

html{
    margin: 0;
    padding: 0;
    border-width: 0;
    width: 100%;
}

body{
    margin: 0;
    padding: 0;
    border-width: 0;
}

#top{
    margin: 10px;
    height: 150px;
}

.wrapper{
    margin: 10px;
    height: 300px;
    width: inherit;
    border-width: 0;
}

#left{
    height: 300px;
    width: 30%;
    float: left;
    border-width: 0;
}

#left .inner{
    height: 294px;
    width: auto;
    margin-right: 10px;

}

#left .innerright{

    height: 294px;
    width: 10px;
    float: right;
    border-width: 0;
    margin-left: 10px;
}


#right{
    height: 300px;
    width: 70%;
    float: right;
    border-width: 0;

}

#right .inner{
    height: 294px;
    width: auto;
}


#bottom{
    margin: 10px;
    height: 150px;
}

This concludes this article on how to solve the div problem when relative width and absolute width conflict in HTML+CSS. For more information on relative width and absolute width conflict in HTML+CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!

<<: How to force vertical screen on mobile pages

>>: How to use React to implement image recognition app

Detailed installation and configuration of MySql on Mac

HTML+CSS div solution when relative width and absolute width conflict

Detailed installation and configuration of MySql on Mac

CSS scroll-snap scroll event stop and element position detection implementation

Example of using nested html pages (frameset usage)

Summary of experience in using div box model

Practice of el-cascader cascade selector in elementui

A complete tutorial on installing Ubuntu 20.04 using VMware virtual machine

JavaScript to achieve simple provincial and municipal linkage

Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0

A brief discussion on mobile terminal adaptation

Example code of the spread operator and its application in JavaScript

Recommend

What to do if you forget the root password of Mysql5.7 (simple and effective method)

Vue+Openlayer uses modify to modify the complete code of the element

JS implements dragging the progress bar to change the transparency of elements

Several popular website navigation directions in the future

Linux disk sequential writing and random writing methods

How to install and configure WSL on Windows

Pessimistic locking and optimistic locking in MySQL

js to realize the production method of carousel

Using MySQL database with Python 3.4 under Windows 7

Idea configures tomcat to start a web project graphic tutorial

Docker and portainer configuration methods under Linux

A brief discussion on whether CSS animation will be blocked by JS

How to add color mask to background image in CSS3

Detailed steps for Linux account file control management

Docker installation method and detailed explanation of Docker's four network modes