The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 3 colum fluid layout

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #39920

    Hi Guys,

    I’m trying to find the best way to achieve this:

    Image Hosted by

    I found Matthews solution : a bit heavy. If I want to have a margin around collmask the width gets screwed up… I was hoping there are less complicated solutions out there by now.

    So anyone has directions or solutions?


    Kitty Giraudel

    The real solution is flexbox module. Not yet fully supported.

    Until then, you’ll have to deal with work arounds.


    I think you could fake this with 100% tall divs and floating but it would be very fiddly and likely to break at will.

    [EDIT: Nope…I’m wrong :) ]

    Basically, Hugo is right…the technology hasn’t caught up with the design yet.


    This wasn’t what you were going for, was it? It feels like I’m missing something.


    Yeah I hope the technology of web will grow towards dynamically designing in the near future so all this stuff is easier to build. It’s exciting how it will develop… I’d better be a part in this I just realised :p

    So about the solution, Houghton I can’t imagine you solved it with just a few lines of code :o It’s so nice and fluidly haha. Is it just the same as the link in my first post?


    I use the one you posted. I’ll post some of the code I put in a separate CSS for the column widths, etc. which might make it easier to understand.

    Kitty Giraudel

    I always feel like absolute positionning is “bad” for layout purposes. But currently, I don’t see any other way to achieve this until flex is supported.


    This is part of the code I stripped out and put in a separate css. You could put it in the same one, just make sure it’s at the very top so the line numbers match the commenting.

    #colmid { /* Left Column Size */
    left: 230px; /* (253) */
    } /* If +/- then Line 6, Line 10 & Line 14 */

    #colright { /* Right Column Size */
    margin-left: -460px; /* (250) = right column size - left column size */
    } /* If +/- then Line 10, Line 15 & Line 19 */

    #col1pad { /* Center Column Padding */
    margin: 0 15px 0 475px; /* CCP = 0(top) 15px(right) 0(bottom) 415px(left padding + left & right column sizes) */

    #col2 { /* Left Column Padding */
    width: 200px; /* (0) LCRP = left column size - left and right padding === Default - 170px */
    left: 245px; /* (0) LCLP = right column size + left column left padding === Default - 215px */

    #col3 { /* Right Column Padding */
    width: 200px; /* (15) RCRP = right column size - left and right padding - Default 170px */
    left: 15px; /* (15) RCLP */

    I see what you’re trying to do now. Sorry when I was browsing the forum on my phone I couldn’t read the words around the image.

    So from what I tested you’ll need to add : #colmid {margin: 0 0 0 10px;} for the left side margin, then #colmask { margin: 0 0 0 10px; }, then just add top margin to the header and bottom margin to the footer. But if you increase the margin, you’ll also need to increase the left and right column sizes.


    @ joepk,

    Yeah, it’s similar, at least. Granted, I did set it up with a predefined height. There are ways around that, of course. (the border trick, for example)


    I guess i’m going to get totally shot down here, but, since there is no real good go-to solution for this. Why not just (GASP!) use tables?

    Very little mark-up, no need for 20-30 lines of css to get margins correct etc.

    I know it’s old-school. But hey, it still does the trick.


    With the help I got here I quite managed to get the desired result :)

    As for the fluid content presenting in the middle I grabbed some code from [Here]( “Responsive photo grid”)

    Check it out! [FLUID STUFF]( “Fluid shop”)

    As far as I know it works well but could use some improvements. Such as the images height could be the same as the width. Dont know how to do this though.

    Tell me what you think of the code n stuff.


    You can do this, today! Using ‘overflow: hidden’: Demo:

    Please note: The source order would have to be: .left-column > .right-column > .center-column

    (I know this is closed, but the oveflow method is better[support wise] than the ones mentioned.)


    Hey jklm, you can’t scroll down no more when the content overflows. Anyone knows how to let the “images” scale in proportion?

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.