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?
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:)
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.
I changed it from 200px to 210px and it worked. Thanks!
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