How do you change the widths of the side columns for the skidoo or skidoo too layouts?
Here’s a basic CSS template that you can use to change the widths:
#outerColumnContainer
{
border-width: 0 [right column width] 0 [left column width];
}
#rightColumn
{
width: [right column width];
margin-right: [negative of right column width];
}
#leftColumn
{
width: [left column width];
margin-left: [negative of left column width];
}
Where
[right column width] = width of the right column. ( 15em default )
[negative right column width] = [right column width] * -1 ( -15em default )
[left column width] = width of the left column. ( 15em default )
[negative left column width] = [left column width] * -1 ( -15em default )
So changing the width of one column requires changes in 3 separate places to the stylesheet. #outerColumnContainer‘s borders are responsible for reserving space for the columns to fit into. Thus the left and right borders should match the width of their respective columns.
Then inside the CSS for each column (#leftColumn, #rightColumn) you need to set the width property to the width you want that column to be, and then you need to set a negative margin on the side that the column is on ( left column should have the negative margin on it’s left side, right column gets it on the right side). This pulls the columns away from the main column (where they are stored within the HTML structure of things) to rest over the space that was reserved for them.
The -1px margin to the opposing side on each column is there so that each column has 1px sticking back into the main column. This is key to getting all three columns the same height regardless of which one is taller.
Why does <column N> get pushed down?
Depending on which skidoo layout you use, different columns become the sort of “master” under which all others are pushed below whenever there’s not enough horizontal space to fit all the columns together.
So why isn’t there enough horizontal space?
Sometimes it could be because there is extra horizontal space being used on any of the three “key column elements” (#leftColumn, #middleColumn, #rightColumn). This can be in the form of padding or margin or borders. Even a 1px border to one side of one column will cause this push-down bug!
Bug what if you want padding or borders on a column? Well that’s why you see a div.inside element as the immediate child to those three key column elements. That’s where you apply your padding.
Of course nothing is ever easy, IE seems to not like vertical padding on these elements, but we care only about horizontal padding not being applied to the key column elements, so you can go ahead and apply vertical padding, margins, borders to those key column elements. But horizontal stuff goes to the .inside class.
Another cause of this is that the column contains an element that is wider than the space allowed. This can happen when you have an image that’s 600px wide, but the column doesn’t have 600px to stretch out to.
This is especially problematic if the image in question is inside a column whose width is not defined in pixels. a 15em wide column is 15ems wide. That’s a relative value dependant on the user’s browser. 15ems might be about 200px on your computer, but it might be only 150px on someone elses. Also if you have a fluid column (such as the middle/main column in the skidoo layouts) you run into problems when the browser window’s width is shrunk below a width that lets the middle column contain that image. And when we’re talking about supporting systems with resolutions of 640×480 all the way to 1280×1024, that’s quite a pickle.
Well here’s my current “hack” for this. Set a right-side negative margin at 99%. That will be 99% the width of the image. So a 500px image becomes 5px wide to the web browser. Even if you shrink your window’s width way down, it won’t push any columns down. What will happen is the image will overlap other column(s) in the layout. Is that more desirable? That’s up to you.
This margin-right: -99% hack only works on images that are either setup as display: block or are, by themselves, inside a block element. If you’ve got images inline with text (this is the default behavior) then what ends up happening is the text is pulled over the image, possibly screwing things up more than with a column pushed down.
So what I recommend is create a class, and apply it to only those images that fit the above criteria, rather than setting a general CSS rule on all IMG elements.
.fixImgWidth { margin-right: -99%; }
You can run into problems with PRE elements as well. This image fix class should work on PRE elements as well.
One other cause for push-downs is a table (or any element) with a width attribute set to 100%. Thing is, 100% width of a given column will create an element wider than the space give. Say you’ve got 1em horizontal padding on a .inside class for one of your columns. 100% width is 100% the width of the parent element. Padding isn’t calculated in as part of the width, so 100% isn’t 100% of .inside – padding, it’s 100% of .inside regardless of padding or margins or anything else. So you wind up with an element wider than it should be.
DIV wrapping the element set to 100% width might solve the issue, but I prefer to stay away from setting anything to 100% width. If the content of a given table is wide enough, it’ll automatically go as wide as it can anyways, so the 100% is pointless. If you’ve got content in a table that isn’t going to make the table go 100% wide, ask yourself why you want that table 100% wide to begin with. Spreading out the data with a lot of whitespace could actually make life more difficult for users who are trying to scan across the table to match a label on the left with a value on the right. Keeping cells close together can ease the user’s experience in trying to match table cells within a given row.
Well that’s a bit to chew on. Maybe the long post makes up for the lack of updates this past month.
Have fun!
The Forgettable Mister Ruthsarian 