Question

My side bar overflow the container div’s border when I set it’s height to 100%,
I would like to know if there is any way I can have it’s height 100% minus some px.

Here is the source:

<div id="main">
    <br /><br />
    <div class="content">
        <div id="sidecontent">
            <h1 id="title">Title</h1>
            *****
        </div>
        <div id="sidebar">
            <div class="sidebox">
                ****
            </div>
        </div>
    </div>
    <div class="bottom"></div>
</div>


#main {
        position: relative;
    background:transparent url('/public/images/main_bg.png') top left repeat-y;
    padding:37px 37px 37px 37px;
    margin-left: auto ;
    margin-right: auto ;
    width:940px;
    min-height: 363px;
        }
        #main div.top, #main div.bottom {
        height:70px;
        width:1015px;
        position: absolute;
        left:0px;
        }

        #main div.content {
        padding:0 15px 0 15px;
        }

        #sidecontent {
        width: 675px;
        }

        #sidebar {
                background: #fff url('/public/images/bg_side.png') top right repeat-y;
        position: absolute;
        height: 100%;
                right:34px;
                top:42px;
        width: 200px;
        padding: 10px 10px 0px 40px;
                z-index:50;
        }

        .created_at {
        color:gray;
        }       

        .sidebox {
        margin-bottom: 5px;
        }

    #main div.top {
        top:-70px;
        background: transparent url(/public/images/main_top.png) bottom no-repeat;
        }

    #main div.bottom {
        bottom:-70px;
        background: transparent url(/public/images/main_bottom.png) top no-repeat;
        }

Answer 1

Try having a look at this article and see if you can follow that. It describes how to have two columns the same height using CSS techniques.