Question

I’m trying to have a fixed width sidebar with a 100% height, next to a banner which has a fixed height but uses the remaining amount of page space. I tried with the following, but I can’t seem to get the banner’s width correct…

Thank you in advance for any insight!

S.

<div id="main">
    <div id="sidebar"></div>
    <div id="banner"></div>
</div>

html, body {
    height: 100%;
}

body {
    padding: 0; 
    margin: 0;
}

div#main {
    width:100%;
    min-height: 100%;
}

div#sidebar {
    float:left;
    position:absolute;
    min-height: 100%;
    width:195px;
    height:100%;
    background-color: rgba(0, 0, 0, 0.8);
}

div#banner {
    position:absolute;
    margin-left:195px;
    top:80%;
    width:100%;
    height:126px;
    background-color: rgba(179, 179, 179, 0.8);
}

Updated with screenshot

Below is what I’m trying to accomplish with the above code, but the banner takes more than the remaining space and extends outside the page, causing a lateral scroll.

Answer 1

div#main {
    width:100%;
    min-height: 100%;
    position:relative;
    overflow:hidden;
}

should do the trick.