Question

I have layout with default width of 987px and aligned centered and currently working on wide layout feature of site. CSS layout structure is as follows:

<div id="BodyContainer">
    <div class="headerouter">
        <div class="outercontainer">
            <uc:Header ID="header1" runat="server" /> 
        </div>
    </div>
    <div class="outercontainer">                
        <div class="main container">
            <asp:ContentPlaceHolder id="CPM" runat="server">

            </asp:ContentPlaceHolder>
        </div>
    </div>
</div>
<div class='footer'></div>

and as if someone chooses a wide layout like having more than 3 columns of record like 4, 5, 6 or 7, then in server side the CSS is overwritten by calculating i.e.

outercontainer = no. of columns * 330px;
container = no. of columns * 330px;

and in reaction to it outercontainer widths increases but the BodyContainer and footer remains the same and layout breaks. And help or solution to this problem but in CSS only.

CSS are as follows:

body {

    font-family: Helvetica, Arial, sans-serif;
    font-size: 75%;
    margin: 0;
    height:100%;
    color: #444;
    background:url('/images/container-back.png') repeat;

    /*Opera Fix*/
    &:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
}


html, form { height: 100%; }

#BodyContainer {
    overflow:visible;
    /*padding-bottom: 130px;*/
    min-height:100%; 
    display:block;  
}

.outercontainer {
    width: 987px;
    margin: 0px auto 0px auto;
    padding: 5px 0px 80px 0px;
    position: relative;  
    display:block;

    &:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
}

.container {
    width: 987px;
    /*width: 1330px;*/
}

check out the problem at the

fiddle

Answer 1

New Answer

Ok – it appears that you are muddling your .outercontainer a bit in the HTML. If I remove the additional .outercontainer divs and add the class to #BodyContainer instead, then this seems to resolve the issue:

<div id="BodyContainer" class="outercontainer">
    <div class="headerouter">
        <uc:Header ID="header1" runat="server" /> 
    </div>            
    <div class="main container">
        <asp:ContentPlaceHolder id="CPM" runat="server">

        </asp:ContentPlaceHolder>
    </div>
</div>
<div class='footer'></div>

Any styling that was in .outercontainer that was being applied to the floating divs can be added to a different CSS class such as .main.

JSFiddle: http://jsfiddle.net/TzAsq/9/