3 colum fluid layout - CSS-Tricks

This topic is empty.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
September 19, 2012 at 7:34 am #39920

joepk
Participant

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 #110330

Kitty Giraudel
Participant

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 #110337

Paulie_D
Member

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 2:34 pm #110405

HoughtonA
Participant

http://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 #110499

joepk
Participant

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 #110588

John
Participant

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 #110591

Kitty Giraudel
Participant

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 #110593
John
Participant
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 #110598

John
Participant

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 #110632

HoughtonA
Participant

@ 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 #110651

DanielMortzen
Member

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 #110741

joepk
Participant

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](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 #110772

jklm313
Member

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

September 27, 2012 at 4:16 am #110881

joepk
Participant

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

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The forum ‘CSS’ is closed to new topics and replies.