Grow your CSS skills. Land your dream job.

3 colum fluid layout

  • # September 19, 2012 at 7:34 am

    Hi Guys,

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

    Image Hosted by ImageShack.us

    I found Matthews solution : http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm 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?

    Thanks!

    # September 19, 2012 at 7:43 am

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

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

    # September 19, 2012 at 8:33 am

    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.

    # September 19, 2012 at 9:27 am

    try the same design, but add this:


    * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }
    # September 19, 2012 at 2:34 pm

    http://codepen.io/anon/pen/Gsdxm

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

    # September 19, 2012 at 4:21 pm

    You can adjust the width of .colmask from 100% to whatever you want (example:96%), remove float:left; and add margin:0 auto;

    # September 21, 2012 at 8:23 am

    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?

    # September 22, 2012 at 3:28 pm

    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.

    # September 22, 2012 at 3:43 pm

    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.

    # September 22, 2012 at 3:50 pm

    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 */
    }
    # September 22, 2012 at 4:20 pm

    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.

    # September 23, 2012 at 6:15 pm

    @ 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)

    # September 24, 2012 at 8:44 am

    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.

    http://codepen.io/anon/pen/Gsngo

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

    # September 25, 2012 at 5:15 am

    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](http://css-tricks.com/seamless-responsive-photo-grid/ “Responsive photo grid”)

    Check it out! [FLUID STUFF](http://codepen.io/anon/full/pbflI “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.

    # September 25, 2012 at 1:58 pm

    You can do this, today! Using ‘overflow: hidden’: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ Demo: http://dabblet.com/gist/3783389

    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.)

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".