Question

I am trying to create a system within my templating where if I put content in the “sidebars” then the sidebar will show and the main window content will be moved appropriately. If there is no content in the sidebar then it wont show.

 <div id="newcontainer">
    <div id="content">               
        <div id="sidebar-left">
        {% block left_sidebar %}
        {% endblock%}
        </div>
        <div id="sidebar-right">
        {% block right_sidebar %}
        {% endblock%}            
        </div>
        <div id="col-main">
        {% block content %}
        {% endblock%}
        </div>
    </div>
</div>

This is how far I have got with other users help:
JSFIDDLE LINK

However, as you can see I have put no content in the left column, but still the padding shows up! This is what I dont want, when there is no content in the sidebar I want it to disappear completely. What options do I have for this? I dont want to put the padding on the center box because when there are no sidebars I will be left with the padding on the center box still.

Answer 1

You can, given a fairly modern browser, use the :empty pseudo-selector to target those empty elements:

#sidebar-left:empty,
#sidebar-right:empty {
    padding: 0;
    border-width: 0;
}

JS Fiddle demo.

You could also, if you wrap the text in the columns with an element (in this case that of the right-column, with a p) in order that it can be targeted with CSS, you can use margin instead of padding:

#sidebar-left p,
#sidebar-right p {
    margin: 0 10px;
}

JS Fiddle demo.

Also, if you move more of the styling to the child elements you can address the visible borders as well (though this has the consequence of the parent element not seeming to be its full, specified, height):

#sidebar-left p,
#sidebar-right p {
    padding: 0 10px;
    background-color: grey;
    border: 0 solid #000;
}

#sidebar-right p {
    border-left-width: 1px;
}

#sidebar-left p {
    border-right-width: 1px;
}

JS Fiddle demo.