CSS layout--solid width, width, width and width

learned the front-end quite a long time, recently wrote a project test system, the layout of the discovery of their own to widen + The fixed width of the layout is not fully mastered, so summarize here, in the future when needed to look back.

1. The simplest of course is one or more columns of fixed width

For example, two columns of fixed width:

1. set a perimeter div--container, which is the total size of the two columns, which can be fixed 800px equivalent.

2. set two div--side,content , respectively within the container

set the pixels as needed, such as a 300px , the other is 500px ;

Set separately Float:left;

2. The two columns are widened to the same 1, except that the pixels are changed to a percentage, for example a 30%, and another 70%

3. The focus is on, two or more columns have a fixed width, there is a widening--typically a column left solid width, a column right widening

1. set a perimeter div--container, which is the total size of the two columns, which can be fixed 800px equivalent.

2. set two div--side,wrap_content , respectively in container

set the width as needed, such as a width:300px , the other is width:100%;

Margin-right: -300px;

3. set float:left respectively ;

4. set a divwithin wrap_content:content, margin-right:300px;