Question

I am using the twitter bootstrap css toolkit for building master page for an application in asp.net webforms 2.0( also .NET 2.0). Nothing of a programming question though it is about design i got page with

    Header
    Breadcrumb
    Maincontent
    -leftsidebar
    -pageContent
    -rightsidebar
    Footer

yeah this is one of those sidebar questions, i got the HTML like below

        <div class="row">
            <div class="span4">
                <!--Place holder for left sidebar-->
                <asp:ContentPlaceHolder runat="server" id="phLeftSidebar">
                </asp:ContentPlaceHolder>
            </div>
            <div class="content">
                <!--Place holder for main content-->
                <asp:ContentPlaceHolder runat="server" id="phPageContent">
                </asp:ContentPlaceHolder>
            </div>
            <div class="span4">
                <!--Place holder for right sidebar-->
                <asp:ContentPlaceHolder runat="server" id="phRightSidebar">
                </asp:ContentPlaceHolder>
            </div>
        </div>

Question

In one of the content(child) pages i got no content for the left sidebar & i was expecting the middle content to take that space too since the right sidebar was spanning only 4 grids. So how do i make the content section take up the available space on absence of either right or left sidebar.

Answer 1

I answered a question much similar to this, you can take a look at the result here.

What it basically came down to was creating a new set of classes that you can add to your .content area in your child page so it can conform to your sidebars.

Just add this to your main CSS and add a class to your .content area according to your sidebar needs:

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Here is a demo of how it looks:

• Without left sidebar: http://jsfiddle.net/6vPqA/4/show/
• Without right sidebar: http://jsfiddle.net/6vPqA/5/show/