WordPress.org

Ready to get started?Download WordPress

Forums

Split Sidebars - Can I do it? (16 posts)

  1. houseofstirfry
    Member
    Posted 7 years ago #

    Hi,
    I'm learning as I go so please forgive me if I'm asking a dumb question. I've tried searching for previous questions/answers but may not be searching with the right terms.

    I have a 3 column layout with both sidebars on the right. I'd like to have them split with the content in the center. I've been able to move both sidebars to the left but I can't figure out how to move the content to the center.

    Can someone take a look and tell me if this is something I'd be able to do with this theme or is the only answer starting over with a new theme? I don't mind plugging away with the trial and error but hate to think I'm doing that for nothing.

    Thanks. My blog is at http://houseofstirfry.com/chia/blog/

  2. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    The simplest way is to rework your theme a bit.

    See, you have the content coming before the sidebars. This makes floating them off to the sides difficult, you have to do some rather annoying hacks and such.

    Instead, edit your theme to put your sidebars BEFORE your main content. Then it's easy. The left one gets float:left and the right one gets float:right. The center one gets nothing special. Your sidebar divs will need to have a fixed width: as well, but the center div won't, it'll scale as the size of the page changes.

  3. houseofstirfry
    Member
    Posted 7 years ago #

    Thank you. I've tried to follow your instructions but I still have a problem. The side bars display (nicely spaced off to the right and left) below the main content.

    For now I've put the float left command back into the content and the site displays with the 2 sidebars on the right. It looks a little better for my visitors till I figure this out.

    If you have any more tips to share I'm eager to learn.

  4. houseofstirfry
    Member
    Posted 7 years ago #

    I couldn't get this working so I've decided to just add some color to what I have and leave well enough alone. thanks for trying

  5. Root
    Member
    Posted 7 years ago #

    With the greatest of respect to Otto42 I would approach it differently. Putting the content first is great for accessibility and search engines. But floated elements need to come first. The solution was proposed by Jeffrey Zeldman about three years ago, it was promulgated at alistapart, and further amplified at thenoodleincident.
    The trick is to float the content AND the menu in opposite directions.
    NOW:
    For 3 colums extra steps are needed. (1). It is necessary to wrap the content and ONE sidebar in another container div #main. (2). There must be two div class=clear. One in main. One after the second sidebar. (3)On no account add lateral, margins, padding or borders to #content or the #sidebar(s).

  6. mrmist
    Forum Janitor
    Posted 7 years ago #

    You should (fairly easily) be able to obtain a 3-column floating CSS layout whilst leaving your main content at the top of the code.

    Have a read of -

    http://glish.com/css/ (bit old now but explains concepts well)

    http://bluerobot.com/web/layouts/layout3.html

    http://www.alistapart.com/topics/design/layout/

  7. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    I'm aware of Root's method, whereby you put one sidebar and the content into a single DIV which is then floated alongside the other sidebar. While it works, I dislike it for the simple reason that you're changing the overall semantics of the page by adding an extra div which is ONLY used for layout.

    If/when we get CSS3, it will have better column handling. In the meantime, I do not think that the benefit by having the content first on the page is important enough to break the semantics by adding an extra DIV which is only used for layout.

    houseofstirfry: I took a look at your page, and you still have the content first. With your particular page layout, you're never going to get the sidebars on left and right. Period. You have to change your template in some fashion. Whether you move the sidebars ahead of the content or whether you take Root's suggestion and add a new DIV around the content and one of the sidebars, either way. Changes to the page must be made, you absolutely cannot do what you want with that page source and CSS changes alone.

  8. Root
    Member
    Posted 7 years ago #

    I have to say I agree with Otto42 on the semantics. But WP has so many gratuitous divs it scarcely makes a difference. Still it is horses for courses. My method(well hardly mine) is pretty stable and robust and avoids a lot of the other bugs that come with floats. Principally in Ottos method you end up with a margined element #content contigious to a float. I always avoid that situation.

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Well, to be fair, I do put my money where my mouth is. My webpage uses two sidebars and a central content div, with the sidebars coming first. It's also flexible width. Works okay for me.

    Outline of my page: http://img507.imageshack.us/img507/3537/pageoutlineol1.png

  10. Root
    Member
    Posted 7 years ago #

    Yes Otto42 but unfortunately the W3C Spec requires that floated elements come first in the source order.:) Checkmate? :)

  11. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Root: I don't follow you. My sidebars are floated, my content is not. What's the problem?

  12. Root
    Member
    Posted 7 years ago #

    No you are right partly:) But my method delivers the benefit of content first - good for SEO and accessibility. Plus 2 floated sidebars. It is the only setup that delivers both those 2 criteria. ie having the floated elements first AND having the content first.

    ergo: the content must float. That is why the likes of Zeldman use it for 3 columns.

  13. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Oh. I agree with your notion there, but I disagree that having the content first improves accessibility or SEO.

    As far as SEO goes, you should really be using the "robots-nocontent" class in your non-content divs in the first place. Both Yahoo and Google use these to determine what's content and what isn't. Well, Yahoo does use it for for sure (they invented the idea), and I'm about 85% sure Google does too.

    The other advantage to not having weird DIVs and such just for layout is that it makes alternate CSS files for displaying on alternative browsers a lot simpler. I have a CSS for printing and a CSS for handheld/mobile use, and these required no changes to my XHTML at all. Just entries to point to the CSS. With correct semantic markup, this is much smaller and simpler to do. Not saying it couldn't be done the other way, but it would not be as elegant.

    I'm just against hacks to correct a perceived and unproven flaw ("content last = bad") at the cost of inelegant markup. The markup should be correct to begin with, the CSS should just make it display properly. The order of things on the same level should be irrelevant. It's not because of the current CSS, admittedly, but there's no real evidence that content first is better either.

  14. houseofstirfry
    Member
    Posted 7 years ago #

    Thank you to everyone who is offering help here. Otto42, after trying your approach I put things back where they started and called it quits.. at least for now. I don't doubt your plan but I was missing something somewhere and it just wasn't coming together. The closest I got was to have the sidebars drop below the content. :( I still have a lot to learn and maybe I'm just not ready for this big of a change yet. I've saved all the comments and may one day give it another go. Thanks again.

  15. moshu
    Member
    Posted 7 years ago #

    Otto's post above ( http://wordpress.org/support/topic/129270?replies=13&view=all#post-600337 )
    has been caught by akismet... Now it's released.

  16. Root
    Member
    Posted 7 years ago #

    Well its been an interesting dialogue anyway. :)

Topic Closed

This topic has been closed to new replies.

About this Topic