One hour to fix the DIV+CSS layout-Fixed page opening layout

The main CSS properties in the Div+css layout are described in:

Float:

The Float property is the most basic and most commonly used property in the DIV+CSS layout for implementing multi-column functionality, and we know that the <div> tag can only display one line in the default row, whereas using the Float property allows you to display multiple div functions in a row. The most straightforward way to explain this is to implement the multi-column function of table layout.

Margin:

The margin property is used to set the distance between two elements.

Padding:

The Padding property is used to set the distance between the border of an element and its contents.

Clear:

Using the Float property to set a row with multiple div (multiple columns), it is best to use the clear property to clearly float before the next line starts, otherwise the above layout will affect the following.

Examples: Use examples below if you make a simple and basic layout, the effect is as follows:

@{Layout = null;}<! DOCTYPE html><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{width:1000px;margin:0 Auto;/*set the entire container to be centered horizontally in the browser*/background:#CF3; }#Header{Height:80px;background:#093; }#logo{Padding-left:50px;Padding-top:20px;Padding-bottom:50px; }#Content{Height:600px;/*The container is set to a height, it is generally not recommended to set the height of the container, generally use Overflow:auto; the property settings container adapts to the height of the content, and if you do not specify a height or do not set an adaptive height, the container defaults to 1 character Heights. Layout element under container (footer) Setting Margin-top: property will be invalid*/Margin-top:20px;/*The use of margin is explained here, and the distance between the content and the header element above is set.*/background:#0FF; }#Content-left{Height:400px;width:350px;margin:20px;/*set the distance between elements and other elements is 20 pixels*/float: Left;/*set the float to achieve a multi-column effect that is important in the DIV+CSS layout*/background:#90C; }#Content-main{Height:400px;width:150px;margin:20px;/*set the distance between elements and other elements is 20 pixels*/float: Left;/*set the float to achieve a multi-column effect that is important in the DIV+CSS layout*/background:#90C; }#Content-right{Height:400px;width:380px;margin:20px;/*set the distance between elements and other elements is 20 pixels*/float: Right;/*set the float to achieve a multi-column effect that is important in the DIV+CSS layout*/background:#90C; }/*Note: The Content-left and content-main elements are child elements of the Content element, with two elements using Float:left and two columns, the width of the two elements and the padding of the two elements set, Margin must not be greater than the width of the parent content element, otherwise the set column will fail*/#Footer{Height:40px;background:#90C;Margin-top:20px; }        . Clear{Clear:both; }</style>

Note: As a container for the entire page, container controls the location of the entire page in the browser, where margin:0 auto is used, the control container container is horizontally centered in the browser, and the general fixed-width layout uses this code.

This article only describes the most basic layout, in the specific development practice may encounter browser compatibility and other issues, encounter the details of the problem please Baidu to solve, the solution of more experience on the accumulation up.

Fix div+css layout in one hour-fixed page opening layout