Not float to achieve middle layout module
The most common form of practical layout: on the left, right, at the end of four modules, width 760 px, the overall middle pages.
Structure code, top left right foot all four modules independent, non-nested.
<div Id="top"> head </ div>
<div Id="left">
<div Id="left_module"> left </ div>
</ Div>
<div Id="right">
<div Id="right_module"> right </ div>
</ Div>
<div Id="foot"> foot </ div>
Top of conventional definition.
(# Top height: 100px; background: # ccc; width: 760px; margin: auto; text-align: center;)
Method A: definition of the outer left 760 px wide and the middle; lining left_module defined as the actual width of the left side of 280 px, and absolute positioning, top value equivalent to the height of the top of the definition.
The advantages of this are: left right two modules code snippet exchange adjustments can be displayed priority.
# (Left width: 760px; margin: auto;)
# Left_module (width: 280px; position: absolute; top: 100px; padding: 10px;)
Method B: left outer defined as 760 px wide and middling, relatively floating in the top; lining left_module defined as the actual width of the left side of 280 px, and absolute positioning.
The advantages of this are: the top of a high degree of freedom can be extended.
# (Left width: 760px; margin: auto; position: relative;)
# Left_module (width: 280px; position: absolute; padding: 10px;)
Definition of the outer right width to 760 px and middling, lining right_module defined as the actual width of the right of 440 px, the use of grammar Habitat left margin. Right_module definition of the actual background color is the right of the background color, height is the actual definition of the middle module height; right of the background color is actually left of the background color.
# (Right width: 760px; margin: auto; background: # E8E8E8;)
# Right_module (width: 440px; background: # F0F0F0; height: 360px; margin: 0 0 0 auto; padding: 10px;)
Belong at the bottom of conventional definition.
(# Foot height: 100px; background: # ccc; width: 760px; margin: auto; text-align: center;)
IE6.0 and FF1.5 test environment, is the most popular syntax is very simple, practical limited, can be a technical reference.
Tags: css float, css layout, div css layout, div layout, Float, layout examples
Leave a Reply