The CSS-Tricks Forums have been going very well since launch. It has only been just over a month and we have 130+ members and 660+ posts. Lots of great discussions have popped up and lots of folks have gotten the troubleshooting help they needed. Huge thanks to everyone! I thought I would highlight a couple of the threads:
Fluid, Fluid, Fixed
Melz says:
I’ve finally decided to cut lose the tables and move on to pure CSS layouts. Unfortunately, it’s been a real pain. I’ve read book after book, visited numerous sites and well… now I’m confused and overwhelmed. “The perfect fluid layout” is exactly what I’m looking for, but I need help with just one thing. I need to add another fluid column into the layout – fluid, fluid and fixed. I can’t seem to wrap my head around it.
You can see the thread here. I jumped in to show how one might go about a three column layout with the first two columns being fluid and the last fixed. You can see my live example here.
Background positioning: Horizontal THEN Vertical
User travisneilson was having trouble with this bit of code:
div#logo {
background: url('../images/logo.gif') top 10px no-repeat;
height: 348px;
width: 182px;
margin-left: 6px;
}It turns out that if you are going to use CSS shorthand for your background property and include background positioning, you need to include the HORIZONTAL VALUE first, then the VERTICAL VALUE, like so:
background-position: [%|px|left|center|right] [%|px|top|center|bottom];Travisneilson had those two mixed up, easy mistake!
What do you do?
Edwin started a new thread asking for folks to introduce themselves. Great idea! I’d love to hear more about you folks. So if you feel so inclined, jump over to the thread and pipe in.
The min-width in your fluid-fluid-fixed demo doesn’t work in IE6 by the way.
If you need a minimum width solution for IE, please refer to the “Perfect Fluid Width Layout” referred to in the thread. You can achieve this with proprietary IE “expressions”.
I hope someone told him about Firebug… the really wonderful thing about it is that if you put the 10px 10px for the position and change it on the fly, you learn everything on the fly.
I do kind of find it a bit weird to go across and then down, when margin short hand is like that of a compass. N, E, S, W.
Wouldn’t it be good to put a
overflow: hidden;to the fixed column in the “Fluid, Fluid, Fixed”-layout? Else a picture larger than the columnswidthwould destroy it all.Or maybe give all pictures in the column a fixed width too? Like
fixed-container img { max-width: 248px; }?