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?

Advertisements

0 thoughts on “Skidoo Side Columns

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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s