How to stop columns wrapping in three column liquid page?

Question

I have been trying to get my head around this for a couple of weeks but just can't get this three column page to stop wrapping once the browser is resized. I have most recently tried using percentages for the margins instead of pixels, but that made no difference.

The CSS code is here

#wrapper 
{ 
       background : #0066FF ;
       color : white ;
       height : 687px ;
       width : 100% ;
       max-width : 1620px ;
       font : 1.4em "Arial", sans-serif ;
       margin : auto ;
       border : 3px solid black ;
       border-top : none ;
       overflow : hidden ;
       position : relative
}

#header 
{ 
         height : 90px ;
         text-align : center ;
         color : black ; 
         background : #66CCFF ;
         margin : 100px auto 0 ;
         clear : both ;
         border : 3px solid black ; 
         border-bottom : 2px solid #0066FF ;
         width : 1620px 
}

#header h1 
{
        font-weight : bold ;
        font-size : 3em ;
        padding : 20px 0   
}



p.paragraphs 
{
        margin : 0 12px 0
}


#left 
{ 
        float : left ;
        width : 15% ;
        min-width : 180px ;
        height : 660px ;
        background-color : #66CCFF ;
        padding : 5px ;
        margin-right : 1.5% ;
        position : relative
}

#content 
{ 
     float : left ;
     background-color : #66CCFF ; 
     color : black ;
     height : 660px ; 
     width : 60% ;
     max-width : 1140px ;
     margin-right : 1.5% ;
     padding : 5px ;
     overflow : auto
}


#right 
{ 
       float : right ;
       position : relative ;
       background-color : #66CCFF ;
       color : black ;
       width : 20% ;
       min-width : 220px ;
       height : 660px ;
       padding : 5px 
}

#right p { margin-top : 20px }

I have made a JS Fiddle here which shows the HTML. If you expand the page you will see how the columns float side by side then wrap as the browser is reduced.

Answer 1

You can't set min-width on the columns, since your wrapper doesn't have a min-width. Also, you should add *{box-sizing: border-box}, since you are using percentage widths without considering the padding and margin.You should also clear your float before the footer. FIDDLE: https://jsfiddle.net/88wbhv9y/2/