CODEWITHSUNDEEP
csslayout
And Finally
And Finally

Reputation: 5704

Fluid layout with some fixed width columns

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

Upvotes: 5

Views: 5508

Answers (5)

Vedmant
Vedmant

Reputation: 2581

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.

Upvotes: 1

LocalPCGuy
LocalPCGuy

Reputation: 6116

I had a similar issue where I needed to have a fixed width left column (menu structure) but have the right column resize responsively as the browser was reduced.

I ended up implementing a few extra media queries (they already existed to handle other edge cases) and finding the percentage width of the right column that worked for that media query. This does "jump" slightly (I only used 2 "extra" media queries over the standard handheld/tablet/desktop ones) but at all resolutions in between it will not break to the next line. In effect you are adjusting the context in each media query before it can break. More media queries would equal smoother breaks as the browser is resized.

I am ok with the jumps because I am not building for the use case of someone resizing their browser, but rather to make sure it works acceptably on different resolution devices.

One caveat, when figuring the percentage widths of the right column, the base width used is the width of the media query you are in, not the original full width. Also, you have to use min-width and use the size that works at the smallest resolution for each media query section. 

/* 641+ */
@media all and (min-width:641px) {  
   .itemDetailLanding {
      width: 58.81435257410296%; /* 377 / 641 */
   }
}
/* 725-768 */
@media all and (min-width: 725px) { 
   .itemDetailLanding {
      width: 63.44827586206897%; /* 460 / 725 */
   }
}
/* 769+ */
@media all and (min-width: 768px) {
    .itemDetailLanding {
        width: 65.625%; /* 504 / 768 */
    }
}
/* 860-990 */
@media all and (min-width: 860px) {
   .itemDetailLanding {
      width: 69.18604651162791%; /* 595 / 860 */
   }
}    
/* 990+ */
@media all and (min-width:990px) {  
   .itemDetailLanding {
      width: 74.04040404040404%;
   }
}

Upvotes: 0

Rudie
Rudie

Reputation: 53781

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.

Upvotes: 1

CBRRacer
CBRRacer

Reputation: 4659

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/

Upvotes: 5

Ashwin Singh
Ashwin Singh

Reputation: 21

I think the solution below can probably help you.

Since you are giving the "row" div width in percentage, its resizing itself every time you shrink the window. Give it a width in pixels if you can, if you can't then use min-width so that it will not re-size below min-width and thus your panel will remain intact.

To make it smooth: You can add javascript to make it smooth. Use window.onresize event to call a function which includes code to make "row" resize slowly by using timed function which increases width of the "row" by 10 pixel or so every 10 miliseconds till the max-length, in this case the window's length is reached. But you can effectively do this if you set the width in pixels, or else an ugly zoom-out, zoom-in effect will be produced.

Hope that helps, Ashwin

Upvotes: 0

Related Questions