CODEWITHSUNDEEP
htmlcss
dmikester1
dmikester1

Reputation: 1372

right side div not filling up right side

I am working on a website for my company. I have a div on the right that is gray that extends down to the bottom. It works on every page except this one. I cannot figure out why it won't extend down to the footer. I have created a jsfiddle for it. If you inspect the divs in the fiddle, you will notice that .leftSide, .mainWrap, and .paddingWrap are not extending down past the "Brochures" title at the top. I can tell this because when I hover over each those divs in the html, the blue and purple only covers the "Brochures" title. I think that is what is tricking .rightSide into not extending down where it should go. I have tried my best to remove all the code in the fiddle that is not relevant to my question.

Fiddle

Relavant CSS:

section.rightSide
{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    min-height: 900px;
    /*float: right;*/
    width: 238px;
    background: rgba(200, 200, 200, 0.7);
    padding: 15px 5px 25px;
    z-index: 1;
}

.leftSide 
{
    padding-right: 248px;
    padding-top: 15px;
}

.paddingWrap
{
    padding: 15px 70px;
}

section.mainWrap
{    
    width: 100%;
    margin: 0 auto;
    font-size: 1.2em;
}

Upvotes: 0

Views: 200

Answers (1)

Ben
Ben

Reputation: 1454

Your need to put this in your CSS: -

.main-content {
     overflow: hidden;   
}

See http://jsfiddle.net/gyzhZ/2/

Upvotes: 2

Related Questions