Support » Themes and Templates » Stretching content width to 100% after sidebar disappears when scrolling

  • Hi guys, I’m working on a wordpress site right now that has a 960px width. I’m using the Toolbox template and building a child theme from it.

    This theme uses the standard setup of a full width header and menu, followed by 2 columns of content (left) and sidebar (right) and followed by a full width footer.

    Since 960px is pretty narrow with a sidebar and individual posts or pages could potentially have a lot of content, I would like the content to stretch out to 100% when you scroll down enough that the sidebar is no longer visible. I would like this to be dynamic, so when you scroll back up, the content would shrink again.

    Here you can see that the content is making room for the sidebar/widget-area in the primary div and the content itself is being pushed back by the margin in the content div.

    #primary {
    	float: left;
    	margin: 0 -240px 0 0;
    	width: 100%;
    #content {
    	margin: 0 280px 0 0;
    #main .widget-area {
    	float: right;
    	overflow: hidden;
    	width: 220px;
    #colophon {
    	clear: both;
    	display: block;
    	width: 100%;
    /* Increase the size of the content area for templates without sidebars */
    .full-width #content,
    .image-attachment #content,
    .error404 #content {
    	margin: 0;

    There’s even CSS already in for pages without sidebars setting margin to 0. Problem is that I have no idea how to automate this, so it could set the margin to 0 when the sidebar is no longer on screen.

    TL;DR: When scrolling, I want to automate setting {margin: 0;} on a certain CSS selector when my sidebar is no longer visible on screen to stretch or shrink content.

    Any suggestions? Thank you for your time.

  • The topic ‘Stretching content width to 100% after sidebar disappears when scrolling’ is closed to new replies.