Column width is getting squished—don't know why

I checked my website today and noticed that the right column on the homepage seems to be getting squished without explanation. I didn’t change any code, to my knowledge, and it wasn’t like this the last time I looked. The right column should be 160px wide. Without banner ads, though, it’s 122px. Can anyone please help figure out why?

You don’t actually have a width set for any of those elements, so it’s just taking the width of whatever the biggest thing inside of it is.

The sidebar has a class, .width260, but I don’t see that actually set anywhere in the CSS. Try this, in your /styles/sidebar.css add:

.width260{width: 260px;}

Yes as mentioned above you don’t have any widths set and as you are using display:table-cell then the browser will decide on how wide the columns will be depending on the content that they hold.

If you add a width to one column then the other column will just take up the available space.

As an aside you should note that widths on table-cells are sometimes treated as a minimum so when you have content that doesn’t fit in the width specified then the cell gets widened to fit (unless you are using the table-layout:fixed algorithm).

Ah. It looks like a typo. I was using .width260 but the class should be .width160.

Thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.