Stretching content width to 100% after sidebar disappears when scrolling (1 post)

  1. roadRUNN3R
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic