Two-column layout--to achieve left fixed, right adaptive (right fixed, left adaptive)

This morning, I tried floating, positioning, calc three ways to achieve the two-column layout of the side of the fixed, while adaptive. Encountered a variety of problems, but at the same time also harvested a lot. The following is a detailed explanation of what a person thinks is simple and better understood.

The effect we want is as shown in the following illustration:

Personally, in general, this layout in the width of the fixed area is the sidebar, and the adaptive area is the main content area-believe that the sidebar to make adaptive people are very few. The following is the HTML structure:

CSS structure:

Preview Effect:

The above effect is obviously not what we want. So then the analysis how to achieve.

1. First we have to let the yellow section below run up, how to run up. Then need the red section above the normal flow of the document, that is, set the float, for example, now the red set left floating;

The CSS code is as follows:

The preview effect is as follows:

2. Next we want to let the yellow part and the red part display side by side, namely does not overlap. Then we're going to set the yellow Margin-left value (greater than or equal to the red width); (or set overflow:hidden for red)

The CSS code is as follows:

The preview results are as follows:

Achieved the effect we wanted.

Summary: First set for a fixed-width element (left or floating-depending on where it is fixed); Next, set the adaptive element (Margin-left or Margin-right value-depending on the left or right float set by the fixed element) or set it overflow : Hidden.