styling the Content column width

  • I’d like to remove the sidebar’s width when not used on a page (so that when there’s no sidebar, there’s no empty width space on the page — so that the body content fills the page).

    I have 960px wide page with 2 columns. The wide one is 640px and the sidebar (right) is 220px. What I’d like to do is style the wide one so that if no sidebar is utilized (via widgets) it will expand to the full width of the page (960px instead of 640px).

    I’ve tried changing the width of the wide column to 100%, but that simply pushes the sidebar below the wide column (when there’s sidebar content). I then removed the width style altogether, but I get the same results.

Viewing 5 replies - 1 through 5 (of 5 total)

  • a:
    you would need to remove the sidebar div or sidebar code if there are no widgets;
    you can find some ideas for conditional code in sidebar-footer.php of Twenty Ten, for instance;

    b:
    you would need to have a specific css class for the content in the case of no sidebar, so you can selectively style this in style.css

    can you post a link to your site to illustrate what you are working with?

    Thread Starter laptophobo

    (@laptophobo)

    Thanks Alchymyth for the quick reply. “B” would be what I’m looking for.

    https://69.36.167.86/upcoming/ is an example of a page where no sidebar is being used, but the content remains at the 640px width. (I’d like this content to not be constrained.)

    https://69.36.167.86/about/ is an example of a page that has sidebar content.

    example of a page where no sidebar is being used

    however, there is still the html structure of the sidebar in the page – therefore you need A: or a ‘display:none;’ css solution.

    your site is using a theme with body_class(0 which gives a page specific css class to the body tag:

    for instance, .page-id-23 is the one for the page without sidebar content.

    in custom.css you could add, for example:

    .page-id-23 #sidebar-container { display:none; }
.page-id-23 #content { width:100%; }

    copy this for any other page without sidebar content – just change the page ID

    btw:
    a tool such as Firefox’ add-on Firebug is helpful in evaluating the involved styles https://getfirebug.com/

    Thread Starter laptophobo

    (@laptophobo)

    Thanks again for the reply.
    The solution you offered is one that I know about. I’m looking for a default solution that would be more of an “if then” situation. In other words, if there is a sidebar then the width of the wide content would be 640px. However, if there is no sidebar, then the wide content would stretch out to 100% of the page (or 960px).

    I don’t wish to create special styles for every page.

    I don’t wish to create special styles for every page.

    look into page templates https://codex.www.ads-software.com/Pages#Page_Templates

    if there is a sidebar

    in your code, there is still the sidebar – although empty – so that idea will not work, unless you look into suggestion a: of my first reply.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘styling the Content column width’ is closed to new replies.