Problems with a 3 column layout with fixed left side

问题

I have a problem making a 3 column layout. I have tried all examples now online - used Google. None of this seems to solve my problem.

What I try to do is easy for people with knowledge.

1. Make a 3 column fluid layout that cover the whole screen.
2. Left column should be 230px width, fixed, height 100%.
3. Center column and right column should be equal width.
4. For both center - and right column they have to "float" into each other

Problem occur when you zoom out. Center column run away to left and make a huge white gap between center column and right column.

That is my problem.

center and right column need to be close to each other - no gap.

How can I solve this?

You can see my attempt here: Fiddle

Just zoom out, and you see the problem straight away. Need help to fix this. How?

Another problem occur if I use a div wrapper inside the center column with width set to 100%. Same problem as described above will happened. The text in both left and right column need to be float as well.

I can't use overflow:hidden because I need to - later - use a absolute div on right side of the center column to set a image arrow pointing to right column.

回答1:

You mean something more like this: http://jsfiddle.net/gbRzM/? (uses left, right and width properties to position everything)

.left {
    width: 230px;
position:fixed;
    background:GREEN;
}

.right {
    right:0;
    width:30%;
    position:fixed;
    background: RED;
}

.center {
    left:230px;
    right:30%;
    position:fixed;
    border:1px solid;
    background:YELLOW;
}

Or more accurately this: http://jsfiddle.net/HKJvP/? (puts center and right in a new div, so that pixels and % can be mixed, allows equal width that you specified)

.left {
    width: 230px;
    position:fixed;
    background:GREEN;
}

.notleft{
    left:230px;
    height:100%;
    right:0;
    position:fixed;
}

.right {
    right:0;
    width:50%;
    position:absolute;
    background: RED;
}

.center {
    left:0;
    width:50%;
    position:absolute;
    border:1px solid;
    background:YELLOW;
}

回答2:

give a fixed width to the parent element of three columns and add class clearfix

``

.clearfix:after {     
    content: ".";    
    display: block;    
    clear: both;  
    visibility: hidden;  
    line-height: 0;   
    height: 0;   
}   

.clearfix {   
    display: inline-block;  
}   

html[xmlns] .clearfix {    
    display: block;    
}    

* html .clearfix {     
    height: 1%;      
}     

来源：https://stackoverflow.com/questions/15307009/problems-with-a-3-column-layout-with-fixed-left-side