better right/left sidebar css (Trac #1402)

[elgg-gitbot]

Original ticket http://trac.elgg.org/ticket/1402 on 2009-12-08 by cash, assigned to cash.

Elgg version: 1.6

I think a better way to handle left and right sidebar with the core css is to define a sidebar class that contains things like border, width, background, etc. Then define ids for left and right sidebar that contain anything unique to being on the left or right like float or margin.

[elgg-gitbot]

brettp wrote on 2010-02-01

Discussion: http://community.elgg.org/mod/groups/topicposts.php?topic=397103&group_guid=212846

[elgg-gitbot]

Milestone changed to Elgg 1.8 by brettp on 2010-02-01

[elgg-gitbot]

ewinslow wrote on 2010-11-24

Here's what I had in mind:

.elgg_page (optionally + .elgg_admin_page)
    .elgg_header
        .elgg_header_contents
    .elgg_body
        [.elgg_right_sidebar] (optional)
        [.elgg_left_sidebar] (optional)
        .elgg_body_contents (fluid, takes up remaining space not used by sidebars)
    .elgg_footer
        .elgg_footer_contents

Notes:

1. They're all classes, not id's
2. It's possible to have 2 left sidebars
3. The naming convention is more consistent. i.e., /elgg_(header|body|footer)(_contents)?/

Inspired by https://github.com/stubbornella/oocss/wiki/Template.

Thoughts?

[elgg-gitbot]

ewinslow wrote on 2010-12-03

http://trac.elgg.org/changeset/7507/elgg/trunk/views/default/layouts/one_column_with_sidebar.php

The way I envisioned .elgg-body is that it's fluid width, so no need for width specifier. It just takes up whatever space the asides don't use. This allows us to change the layout with and the aside widths independently of each other, rather than having to keep everything in sync.

[elgg-gitbot]

cash wrote on 2010-12-03

Are you suggesting we use this hack?

.main{display:table-cell;_display:block;width:auto;} .body,.main{_zoom:1;} .body:after,.main:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}

[elgg-gitbot]

ewinslow wrote on 2010-12-03

The * hacks are for IE. The xxxxx stuff is clearfix. Who knows why there are so many x's... and we already have our own clearfix implementation.

{display:table-cell; width:auto} seems fair to try out, no?

[elgg-gitbot]

cash wrote on 2010-12-03

The xxxx stuff is what makes it fill the space. {display:table-cell; width:auto} does not do that.

If we want a fixed width sidebar and a space filling main column, the options that I know of are:

• specify width on main column
• negative margins
• the xxx hack

• switch to a table layout (either with actual table or using table-related display values). see below

  .layout { width: 1000px; margin: 0 auto; display: table; } .aside { width: 200px; display: table-cell; } .body { display: table-cell; }

  sidebar

  main

Using a table layout means you cannot float the columns to achieve right/left sidebar changes. It also doesn't work with IE6 or IE7 so we would need to implement negative margins.

Specifying the width or using the xxxx hack look like the best options.

[elgg-gitbot]

ewinslow wrote on 2010-12-03

There is method in the madness! Cool. The other techniques I can think of are overflow: hidden or inline-block. Haven't tested those though.

[elgg-gitbot]

cash wrote on 2010-12-03

Another option is absolute positioning the sidebar. Neither overflow: hidden nor inline-block should work (or maybe I don't know where you're going with those).

The key is getting the body div to either fill the available space up to the sidebar or fill the entire parent div with a margin for sidebar. All the margin/absolute positioning techniques require CSS markup of the body div based on the size of the sidebar. I'd rather not deal with that and just use a width on the body div.

At this point, the two contenders seem to be main column width or using the xxxx hack. The xxxx hack has the advantage of being able to reuse it in any body|aside module.

[elgg-gitbot]

ewinslow wrote on 2010-12-03

overflow:hidden is magical: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/.

Sounds like display:table-cell is best, though, because there's no chance of having content clipped. Why don't we go with that?

[elgg-gitbot]

cash wrote on 2010-12-04

Very cool - I didn't know that about overflow. I agree it is not a good solution due to clipping.

By display:table-cell, do you mean the xxxx trick or a table based layout using display:table* elements?

[elgg-gitbot]

ewinslow wrote on 2010-12-04

xxxx means we can use floats, but display:table* gives equal-height columns. I'm not too picky either way. I hate to cite cross-browser issues, but I'm betting xxxx will do better with these. I'm not sure what fallback we could use for older browsers if we went with display:table* since it requires a certain order in the source code.

[elgg-gitbot]

cash wrote on 2010-12-04

I'll deal with creating an expanding .elgg-body first and then deal with the equal column heights.

[elgg-gitbot]

cash wrote on 2010-12-04

(In [svn:7528]) refs (Trac Ticket 1402) first cut of the new sidebar layout code (plus some other stuff - very non-atomic commit). blog plugin uses the one sidebar layout and bookmarks uses the two sidebar layout (for testing purposes)

[elgg-gitbot]

cash wrote on 2011-02-06

sidebar layouts work - still working on spacing filling body options