Sidebar cuts off on .lj-view-entry,.lj-view-archive and.lj-view-month using Flexible Squares on DW

[marahmarie]

ETA: SOLVED. With this layout, deleting display:none from .clearfoot fixes things right up (yes, the design seems to be inadvertently coded so that it cuts off the sidebar in the three views mentioned in my post title).

Like in this example. Another user in this community had the same problem months ago (not with this style, actually a Core 2 style) and I was one of the ones who helped them, though I wasn't of much help because nothing I tried or suggested at the time really worked. Can't help myself now, either. Any suggestions?

Comments

[carene_waterman]

ETA: Okay, thought about this and realized you likely don't mean the calendar issue. You mean that there is no margin below the sidebar when the page has no footer and the sidebar is the longer of the two columns, yes?

Okay, the reason for this is that the style applies display:none; to the .clear divs that are part of the layout. This is the very old-fashioned way of clearing floats used on most LJ and DW layouts. display:none stops them from having any function in the layout. There are two of them, one below the content and sidebar columns and one below the #footer.

You can either get rid of that display: none; and you'll have some extra spacing on all pages, or if that messes up the design for you, try adding a margin-bottom to the #sidebar which worked on my browser.

Do you mean the way the calendar overruns the sidebar?

The problem there is that the calendar module is a table and tables are not very fluid. There will be a minimum size it will occupy, depending on how it is styled--in this case it looks like the td padding and font size are driving the size of the table.

Therefore, the only way to prevent the problem you're seeing is to limit the user preference of sidebar width. You can put a min-width in the css on the sidebar which will override the user preference or dig into the S2 and make it impossible for the setting to go below the calendar width.

For a really good implementation of this, I would suggest making the min-width conditional on the calendar being in the sidebar. If it's in the other module section, it's not an issue.

And ding, ding, ding: we have a winner.

[marahmarie]

Thank you! I cannot believe I was so blockheaded as to overlook the clears set in the custom CSS by the designer. There's .clear {display: none;height: 0px;} and .clearfoot {display:none; clear: both;}; once I deleted everything but the clear:both on the latter, my problem cleared (pun intended) right up.

And I know nothing about the calendar overrunning my sidebar, haven't noticed it, though I've been working on the calendars in the sidebar and on .view-archive a bit, but I'm not done with either yet, so I'll look into that. Thanks again!

ETA Damn, sorry for five edits now, I think, but I just discovered something I might as well share for posterity's sake: .clear clears the #maincontent side of the page and deleting it is not good for this particular layout; on .view-entry pages doing so opens a huge gap between the previous/next linkbar up top and the post title. It also adds about an inch of extra white space to the bottom of the page. To clear the sidebar, editing .clearfoot alone does the trick.