so, i've got a weird issue i can't figure out how to resolve...
I'm creating a site using the grid system from 960.gs - i'm modifying a bit, but for the most part it's going to be their grid. I'm looking to have a "grid" on the page similar to this: http://www.mrporter.com/
I've looked at their code and it seems pretty finicky to produce their borders and I'm wondering if I can create a more reusable way. Here's what i have so far.
http://mattriddle.com/12stone/template.html - this is pretty much the default behavior. The divs are set with a 10px margin, creating a 20px gutter dividing them. Here's the relevant code .grid_x { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; background: #fff; }
http://mattriddle.com/12stone/template-new.html - here's what i've come up with. My issue is that the inner div dividers are 2px. Here's the modified code .grid_x { display:inline; float: left; position: relative; padding-left: 9px; padding-right: 9px; margin: 1px; background: #fff; } Can anyone think of a way I would be able to create theese multiple combinations of divs/boxes with only 1 px in between? These 3 variations will be used interchangeably with great frequency.
If you use the "alpha" and "clear" classes in 960.gs, you can do a rough work-around, but it is not ideal.
I think you'll have to set all .grid_x rule to have a border on top and right only
.alpha has a border on top, left and right
.clear has a border on top only
It might work, but I suspect that you are going to have to add classes depending on if a div has neighbors or not.
one possibility :
The container's background-color provides the borders. Give every float only a 1px top and left margin, but keep their outer-width the same so adjust padding. Then you only have to adjust the container size to add a right/bottom border ( width: 1081px, padding: 0 0 1px 0; ).
Originally posted by: wowbagger[tip] one possibility :
The container's background-color provides the borders. Give every float only a 1px top and left margin, but keep their outer-width the same so adjust padding. Then you only have to adjust the container size to add a right/bottom border ( width: 1081px, padding: 0 0 1px 0; ).
This has the WIN.
I was having some luck with ditching the backgounds and margins to make borders and actually using border top and left on all grid divs, and then adding border bottom and right to the container. But I think wowbag's is simpler.
Thanks! I'll try these suggestions when i get into the office...I think the top/right, bottom/left thing might work. I'm totally kicking myself for not catching this in the design process. I'm usually pretty good as spotting trouble areas like this and heading them off early.
the mr porter site does a similar thing....they have a class for "sides" and one for top or bottom. that gets added, since they're only using it on the homepage, it's probably not that bad to do that, but this is running through most of our layout.
you don't need any special new classes to do what wowbag said. Just remember to add pixels to the padding where you take pixels away from the margin, to keep the total width and height correct.
I think wowbagger is teh_win. I'm keeping it at 1080 total width and adjusted as such:
.container { margin-left: auto; margin-right: auto; width: 1083px; padding-bottom: 1px; padding-right: 1px; background: #acacac; }
.grid_x { display:inline; float: left; position: relative; padding-left: 10px; padding-right: 10px; margin-left: 1px; margin-top: 1px; background: #fff; }
which gives me a single pixel border:http://www.mattriddle.com/12stone/template-new.html
I then just had to adjust some of the specific sizes of the columns to account for when i have one that spans the full width or 2 columns wide.
This looks like it'll work for my specific application....if I had to use more of the full range of grid_x sizes, it might be a little more complicated, but I think this'll do.
:notworthy
Good shit, way better than my suggestion
ok. new problem. I'm having issues with extended amounts of text and getting my divs to display properly.... example: http://mattriddle.com/12stone/fullGrid_articlePage-test.html
I thought this solution would work:http://mattriddle.com/12stone/Untitled.html
but with extended text, i get this:http://mattriddle.com/12stone/Untitled2.html
I've tried various combinations of height: 100%, min-height: 100%, etc and nothing is seeming to solve my problem.
Ah the old multi column equal height layout problem. Css's achilles heel.
This might get you started, there are multiple ways to do this when you google, but in my eperience most get pretty ugly markup-wise : http://matthewjamestaylor.com/blog/perfect-3-column.htm
I've never found a repeatedly satisfying method, it also depends on the rest of your markup/css. The latest portal I worked on just uses javascript to handle it.
Yeah, i found that among other solutions and nothing is workable (I can't really restructure my whole site around this). I might just resort to a JS hack, which I've found. :
just as an FYI, i've resorted to a JS hack... I'm using this one, which is pretty versatile despite me needing to have a separate parent div for the article area. http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/