Question

I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn’t show unless I fill it with some content or use absolute positioning.

This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/

With the following CSS:

#middleContent
{
    position:relative;
    min-height:500px; 
    height:auto;
}

#middleMain
{   
    float:left;
    height:100%;
    left:0;
    right:auto;
}

#middleRight
{
    position:absolute;
    float:right;
    width:100px;
    height:100%;
    right:0;
    background-color:Orange;
    top: 0px;
}

However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn’t have any content in it (but needs the capability to add content so I can’t just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.

Answer 1

change your CSS to :

    #middleContent
    {
        position:relative;
        min-height:500px; 
        height:auto;

        overflow: hidden;
    }

    #middleMain
    {   
        float:left;
        height:100%;
        left:0;
        right:auto;
    }

    #middleRight
    {
        position:relative;
        float:right;
        width:100px;
        height:100%;
        right:0;
        background-color:Orange;
        top: 0px;

        padding-bottom: 9000px;
        margin-bottom: -9000px;
}

http://jsfiddle.net/fXHqL/1/