CSS's simple box layout

, the header of the height:80px, Side-bar width:200px, the other is not known , how to make the layout??

In the context of responsive layouts, the first thing to think about is the Flex layout:

. Header{Height:80px;width:100%;Background-color:#654a8e; }. Wrapper{Display:Flex;width:100%;Height:100%; }. Side-bar{Flex:None;width:200px;Height:100%;Background-color:#3ad3cd;text-align:Center; }. Content{Flex:1;Height:100%;width:100%;Background-color:#fd145e; }

is to use a wrapper to wrap in addition to the header of the content, define the style Display:flex, the specific will not repeat.

Of course, Max/min-width/height can also be utilized, for example:

. Header{Height:80px;width:100%;Background-color:#654a8e; }. Wrapper{Display:Flex;width:100%;Height:100%; }. Side-bar{Flex:1;Max-width:200px;Height:100%;Background-color:#3ad3cd;text-align:Center; }. Content{Flex:1;Height:100%;width:100%;Background-color:#fd145e; }

This allows for a flexible side-bar, but the widest can only be 200px.

But in order to take care of compatibility (Flex low-version browser is certainly incompatible), of course, the preferred multi-year CSS layout is inseparable from the floating, Float:left!!

However, under the conditions given, which should be floating or floating??

Here's a try:

First let Side-bar and content all float to the left.

. Header{Height:80px;width:100%;Background-color:#654a8e; }. Side-bar{width:200px;Height:100%;Background-color:#3ad3cd;float: Left;text-align:Center; }. Content{Height:100%;width:100%;Background-color:#fd145e;float: Left; }

The results are as follows:

Because the width of the content is set to 100%, the left floats should be the same line as the Side-bar, and the result is automatically moved to the next line after the screen width, which also fits one of the floating effects: floating elements will also snap to each other, and if there is not enough space to snap, then go to the browser edge.

Then try just let Side-bar float, see what effect:

. Header{Height:80px;width:100%;Background-color:#654a8e; }. Side-bar{width:200px;Height:100%;Background-color:#3ad3cd;float: Left;text-align:Center; }. Content{Height:100%;width:100%;Background-color:#fd145e; }

The result is the layout style that we need, and then look at the floating definition: leaving the element out of the standard flow document .

And this is: when the first block level because float out of the standard document flow, the latter block level will be self-righteous in the standard document flow of the first element and top.

Add the left float to content alone, the effect and two are left floating the same, even if the correct layout or to try, in case of preface.

CSS's simple box layout