4 Column Position absolute layout

Question

I have a layout setup which can be view here: http://jsfiddle.net/Pn3ts/

It all works fine but i need to set a max/min width around the whole lot.

So i assume to do this i'd add in position: relative; onto the .row class. However if i do this the background of each .col seems to collapse. (see here: http://jsfiddle.net/YDBYK/)

How would i work this?

Answer 1

Give the html, body, and .row a height of 100% and it'll work.

html, body {
    height: 100%;
}

.row {
    position: relative; 
    width:100%; 
    height: 100%;
    margin: 0; 
    max-width: 400px; 
    min-width: 300px;
}

jsFiddle: http://jsfiddle.net/YDBYK/1/