December 10, 2004

Skidoo Side Columns

Took the server down today to perform some routine maintenance. Everything went fine and the server is back up.

importrival posted a question to the We Are All Made Of Stars entry asking about photos in the right-column of a skidoo layout causing the content (middle) column to drop down.

The problem is that you have padding applied to the right column which makes the available width of that column too small to fit the pictures. FireFox/Mozilla will allow the overflow, and handles it in a way that keeps the layout looking fine. IE handles the overflow by pushing the column down.

A quick fix would be to add the following CSS to the layout:

#rightColumn .inside {
padding-left: 0;
padding-right: 0;
}

And that should take care of the problem.

However, it's important to note that you're using the default column widths, which are set in EMs. You are then using images which have widths defined in pixels. Not everybody has the same pixel width for 1em. Meaning 15ems on your screen and 15ems on another may not match and you could run into this problem again.

So what you need to really do is define the rightColumn's width in pixels. (and sure to define the other 2 values associated with the rightColumn's width in pixels too!)

#rightColum { width: 200px; margin-right: -200px; }
#outerColumnContainer { border-right-width: 200px; }

Cool?

Posted by Ruthsarian at 03:16 PM | Comments (4)

Comments

I tried to change the ems to pixels, but I must have did it wrong. Do I REPLACE this: #rightColumn { float: right; /* floating this right allows for the right column block to appear before the content column in the flow of the document. doing this allows for any easy 3 column layout in NN4. There is certainly a lot, in terms of layout 'theory' about how the flow of the document should be. I won't get into it here. */ width: 15em; margin: 0 -15em 0 1px; /* same as in the #leftColumn selector up above. */ } with this: #rightColumn { width: 200px; margin-right: -200px;} Also, does '#outerColumnContainer' refer to the left, content, and right columns? "(and sure to define the other 2 values associated with the rightColumn's width in pixels too!)" I could not find the 2 values. I think I'm making this too complicated:) Posted by: importrival at December 13, 2004 02:08 AM
importrivial: The #rightColumn CSS given in the post should be integrated with the existing CSS. Meaning you need to change the width value of the existing CSS to 200px and the margin-right value to -200px for #rightColumn. Right now those values are 15em and -15em respectively. #outerColumnContainer is the css element that creates the space for where #rightColumn will go. It's a parent element of all 3 columns. Right now the width of left and right borders are set in a single line: border-width: 0 15em; Which you would then change to: border-width: 0 200px 0 15em; and that should get you going. Posted by: Ruthsarian at December 13, 2004 09:47 AM
I changed it from 200px to 210px and it worked. Thanks! Posted by: importrival at December 13, 2004 04:32 PM
Like the others: I like your layout and your coding!!! And I have the same problem as the people above. BUT I'm using the SKIDOO TOO-code. And the fix doesn't work :-| Because I know, that you are "busy, busy, busy": Is anybody out there with a solution for the picture-(right-column) and form-problem (middle column)!? With the best wishes, Michael Posted by: Michael at January 31, 2005 10:01 AM

Post a comment










Code:
Type Code:

Remember personal info?