Home/ Questions/Q 7077701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:27:22+00:00

The attached image is what we want to achieve with html / css. The

  • 0

The attached image is what we want to achieve with html / css. The main points are that the page is 960px centered, the left column takes almost 1/3 of that and the right takes almost 2/3. Both sections are separated by the dark gray line. That’s simple to do.

The problem is that on the left of the left section, we want the same background pattern as the one in the left section. And same for the right side. So on the right of the right section, we also want the light gray background pattern. Of course we don’t know ahead of time how wide the browser will be open.

I’m looking for a clean browser independent solution – not a hack that works in some cases and in some cases doesn’t. Also, if it’s any help we’re using LessCSS (casic CSS3 solutions work too).

Appreciate your input!

screenshot

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve managed to get this done using CSS and JS (using jquery, but you could do similar stuff using pure JS). I set the left/right to simply use different background colours – feel free to use images.

    CSS:

    body {
    margin: 0px;
}

#full {
    min-width: 960px;
    position: relative;
}

#dleft {
    min-width: 319px;
    background-color: darkGray;
    border-right: solid 3px gray;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px
}

#dright {
    min-width: 638px;
    background-color: lightGray;
    height: 200px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.left-content {
    float: right;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 299px;
    padding: 10px;
    margin-top: 10px;
}

.right-content {
    float: left;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 618px;
    padding: 10px;
    margin-top: 10px;
}

    JS:

    function resizeDivs()
{
    var WIDM = 960;
    var WIDL = 319;
    var WIDR = 638;

    var ww = $(window).width();

    if(ww <= WIDM)
    {
        $('#full').width(WIDM);
        $('#dleft').width(WIDL);
        $('#dright').width(WIDR);
    }
    else
    {
        var pad = (ww - WIDM) / 2;
        $('#full').width(ww);
        $('#dleft').width(WIDL + pad);
        $('#dright').width(WIDR + pad);
    }               
}

$(document).ready(resizeDivs);
$(window).resize(resizeDivs);

    And, finally, HTML:

    <body>
    <div id="full">
        <div id='dleft'>
            <div class="left-content">
                Left Column
            </div>
        </div>
        <div id='dright'>
            <div class="right-content">
                Right Column
            </div>
        </div>
    </div>
</body>
    • 0