From http://www.zendstudio.net/post/52/
Some people have been asking: "I want to use Div + CSS to implement three-column layout, and I need to fix the left and right width and adapt to the middle. What should I do ?"
I usually reply like this: "in the middle, set margin-left to set the leftdiv width, set margin-right to set the rightdiv width, then the leftdiv float left, And the rightdiv right to float !", But some people say no. I had to prove the correctness of my truth with practice.
OK! Below is my complete testCode.
-
- <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <Html Xmlns=Http://www.w3.org/1999/xhtml">
-
- <Head>
-
- <Meta HTTP-equiv="Content-Type" Content="Text/html; charset = gb2312" />
- <Title>Untitled document</Title>
-
- <Style Type="Text/CSS">
-
- <! --
-
- *{
-
- Margin: 0;
-
- Padding: 0;
-
- }
- . Box {
-
- Width: 100%;
-
- Font-size: 12px;
-
- }
-
- . Leftdiv {
-
- Float: left;
-
- Width: 200px;
-
- Height: 600px;
-
- Background: # f00;
-
- }
-
- . Middlediv {
-
- Background: #0f0;
-
- Height: 600px;
-
- Margin: 0 200px;
- }
-
- . Rightdiv {
-
- Float: right;
-
- Width: 200px;
-
- Height: 600px;
-
- Background: # 00f;
-
- }
-
- . Clearfix {
-
- Clear: both;
-
- Font-size: 0;
-
- Height: 0;
-
- }
-
- -->
- </Style>
-
- </Head>
-
-
- <Body>
-
- <Div Class="Box">
- <Div Class="Leftdiv">The content of Class "leftdiv" is displayed here.</Div>
-
- <Div Class="Rightdiv">The content of Class "rightdiv" is displayed here.</Div>
- <Div Class="Middlediv">The content of Class "box" is displayed here.</Div>
-
- <Div Class="Clearfix">The content of Class "Clearfix" is displayed here.</Div>
- </Div>
-
- </Body>
-
- </Html>
Pay attention to the sequence of the three Divs! The IE 3px bug was not fixed, but the performance was hardly affected. The above code passes the test in IE 6 and ff.
From this conclusion, the layout of the two columns is to remove the right div, and then remove the margin-right in the middle.