- This topic is empty.
-
AuthorPosts
-
September 19, 2012 at 7:34 am #39920joepkParticipant
Hi Guys,
I’m trying to find the best way to achieve this:
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 #110330Kitty GiraudelParticipantThe 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 #110337Paulie_DMemberI 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 2:34 pm #110405HoughtonAParticipanthttp://codepen.io/anon/pen/Gsdxm
This wasn’t what you were going for, was it? It feels like I’m missing something.
September 21, 2012 at 8:23 am #110499joepkParticipantYeah 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 #110588JohnParticipantI 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 #110591Kitty GiraudelParticipantI 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 #110593JohnParticipantThis 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 #110598JohnParticipantI 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 #110632HoughtonAParticipant@ 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 #110651DanielMortzenMemberI 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 #110741joepkParticipantWith 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](https://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 #110772jklm313MemberYou 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.)
September 27, 2012 at 4:16 am #110881joepkParticipantHey jklm, you can’t scroll down no more when the content overflows. Anyone knows how to let the “images” scale in proportion?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.