Fluid layout with some fixed width columns

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/

Answer 2

There's no clean way of doing this. But who needs clean?

I wouldn't reccomend mixing fixed and fluid widths, but if you are, you might need media queries (plenty of polyfills available for IE). You could then check if the container is smaller than X in which case you rearrange the layout (1/3 for all columns or just everything vertical etc).

The example is a little strange though. What's in all the white space in the middle? Which is the content?

PS. Don't use min-width. That invalidates the whole responsiveness.

Answer 3

I'm wondering why just not to use tables?

Like:

<table class="row">
    <tr>
        <td class="main">
        </td>
        <td class="middle">
        </td>
        <td class="sidebar">
        </td>
    </tr>
</table>

It become very simple using table layout, there is no JS, same column height, full compatibility with any browser.

Here is the example: http://jsfiddle.net/nJ97q/162/

I know everybody says that using tables is bad practice, but it really solves all this issues.