HTML structure and basic styles

The structure of HTML is the outermost div, and the two inner divs represent the left and right divs respectively.

<div class="wrapper"> <div class="right"> </div>Copy the code

Put a border around the outermost div. The width of the left div is fixed at 200px.

   .wrapper {
     border: 1px solid #000;
   }
   .left {
     width: 200px;
     height: 200px;
     background-color: rgb(97, 143, 204);
   }
   .right {
     height: 300px;
     background-color: rgb(165, 103, 207);
   }
Copy the code

All subsequent styles are based on this style.

The current page layout looks like this:

The first: Use float

The left div is separated from the document flow by float, and the right div is separated by margin-left in order not to block it.

   .wrapper {
     border: 1px solid #000;
   }
   .left {
     width: 200px;
     height: 200px;
     background-color: rgb(97, 143, 204);
     float: left;
   }
   .right {
     height: 300px;
     background-color: rgb(165, 103, 207);
     margin-left: 200px;
   }
Copy the code

The effect is as follows:

Second: use absolute positioning

In the same way, the absolute positioning can remove the element from the document stream, and then set margin-left to the right div to prevent occlusion.

Remember to set position: relative for the parent element.

   .wrapper {
     border: 1px solid #000;
     position: relative;
   }
   .left {
     width: 200px;
     height: 200px;
     background-color: rgb(97, 143, 204);
     position: absolute;
   }
   .right {
     height: 300px;
     background-color: rgb(165, 103, 207);
     margin-left: 200px;
   }
Copy the code

Third: use float +BFC

First float the left element out of the document flow. To keep the float from affecting the right element, you can make the right element form a BFC. The simplest is to set overflow: hidden for the element on the right.

   .wrapper {
     border: 1px solid #000;
   }
   .left {
     width: 200px;
     height: 200px;
     background-color: rgb(97, 143, 204);
     float: left;
   }
   .right {
     height: 300px;
     background-color: rgb(165, 103, 207);
     overflow: hidden;
   }
Copy the code

Fourth: Use Flex

First, set display: flex to the parent container, then let the right div automatically enlarge to the full space and set the property Flex: 1 1 Auto (also known as Flex: auto).

   .wrapper {
     border: 1px solid #000;
     display: flex;
   }
   .left {
     width: 200px;
     height: 200px;
     background-color: rgb(97, 143, 204);
   }
   .right {
     height: 300px;
     background-color: rgb(165, 103, 207);
     flex: 1 1 auto;
   }
Copy the code