Question

I’m looking into the whole responsive design thing and finding fluid grids great for that – the only problem is they seem to break when I try to give a fixed width to any column. As you shrink the screen, the columns pop out of float. I’d have expected a fluid column with a percentage width (or no width) just to shrink, leaving the fixed width columns in place. How easy is it to create a hybrid fluid/fixed grid like this? I’ve seen one solution with inline-block instead of floated blocks, but how good is that across browsers, and is it a clean way of doing things?

Here’s an example of the problem: http://jsfiddle.net/andfinally/nJ97q/2/

Thanks!
Fred

Answer 1

Set min-width on the wrapper div to the minimum width of the two fixed columns + a little for the next column. This makes it so it doesn’t push.

#row { min-width: 400px; }

The one caveat is that it isn’t supported by IE6 and below and can be buggy in IE7.

——— EDIT ————-

What would work best for you in this situation I think would be a display: table-cell setup. This will allow everything to be locked to the positions that you are looking for.

.main {
    padding: 10px;
    background: #efefef;
    display: table-cell; //this locks to #sideNav
}

#sideNav {
    display: table-cell; //this wraps the sidebar and middle and locks to main
    width: 280px;
    verticle-align: top;
}

.middle {
    display: table-cell; //this locks with .sidebar
    width: 140px;
    padding: 10px;    
    background: #bbb;  
}

.sidebar {
    display: table-cell; //this locks with .middle
    width: 100px;
    padding: 10px;    
    background: #555;  
}

http://jsfiddle.net/nJ97q/73/