CSS: Two 50% fluid columns not respecting min width

Question

I\'m trying to use this layout with two 50% column width instead. But it seems that when the right columns reaches its \'min-width\', it goes under the left column. Is there

Answer 1

Here is a good example of what you desire I think.

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

In short here is the CSS:

/* Start of Column CSS */
#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#ffa7a7; /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:#fff689; /* column 1 background colour */
}
#col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

Here is the html:

    

        

            
            
Equal height columns
            
It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.

            
Valid XHTML strict markup
            
The HTML in this layout validates as XHTML 1.0 strict.
            
        
        

            
            
Windows
            

                
Firefox 1.5, 2 & 3
                
Safari
                
Opera 8 & 9

                
Explorer 5.5, 6 & 7
                
Google Chrome
                
Netscape 8