HTML CSS Layout Two

Floating-based layouts

Floating-based layouts are the easiest to use and the most reliable, just set the width of the element and then set it to either left or right to float.

1. Two-column floating layout

Assume that the total width of the page is 920px, and two element spacing is 20px. (display:inline prevent IE double margin floating caused by the bug); Because the elements are floating,

Will no longer occupy space in the document stream, Overflow:hidden the parent node;

CSS code:

. right {    width:650px;    padding-left:10px;    Float:right;    Display:inline;}. Left {    width:230px;    Float:left;    Display:inline;}

2. Three-column layout

The principle is consistent with the two-column layout, and you can add two elements to the right element. The same can be achieved.

Fixed-width, flow-style layout, and resilient layout

The above examples are in pixels, called fixed-width layouts. Is the simplest and most commonly used layout method.

Fixed width layout disadvantages:

The large screen can not make full use of space, small screen display is not full, fixed-width layout for the browser default text size, if the text size increases, will affect the interface display.

1. Flow layout

With streaming layouts, dimensions are set with percentages. Can be scaled according to the browser window, usually set min-width, so as not to zoom the page caused by the squeeze content.

If the designer uses a width of 960px, the majority of the user's screen is 1250px to calculate. The percentage is 960/1250=76.8%;

The CSS code is as follows:

. root{    width:76.8%;    margin:0 Auto;    Text-align:left;}. Right {    width:72.82%;    Float:right;    Display:inline;}. Left {    width:25%;    Float:left;    Display:inline;}

Because the page has scaling can increase max-widht and min-width restrictions.

HTML CSS Layout Two