Right sidebars overlapping one another

Question

I'm trying to create responsive right column. The problems is that when I create a new div for the right column it over laps the previous right sidebar. How can I fix this?

Here's the LINK

My CSS:

.columnsContainer, footer, header { position: relative; margin: .5em; }

.leftColumn, .rightColumn, footer, header {  border: 1px solid  #ccc; padding: 1.25em; }

.leftColumn { margin-bottom: .5em; }

/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
  .leftColumn { margin-right: 19.5em; }

    .rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   
}

Thank You

Answer 1

You shoul think of your layout. The problem comes up with your styling. Especialy the position: absolut causes problems.

SIMPLE BASIC TAMPLATE

You should create a column left, a column right and a footer. Then place the content in each column.

A basic layout for this could be:

<div class="wrapper">

    <div class="col-left">
        Column left 
        <div class="content-left">
            content left content
        </div>
        <div class="content-left">
            content left content
        </div>
        <div class="content-left">
            content left content
        </div>
    </div>
    <div class="col-right">
        Column right
        <div class="content-right">
            content right content
        </div>
        <div class="content-right">
            content right content
        </div>
        <div class="content-right">
            content right content
        </div>
    </div>
    <div class="footer">
        footer
        <div class="content-footer">
            footer conten
        </div>
    </div>
</div>

and the CSS could look like:

.wrapper{
    margin: 0 auto;
    width: 50%;
}
.col-left{
    float: left;
    width: 70%;
    background-color: aliceblue;
}
.col-right{
    float: right;
    width: 30%;
    background-color: ActiveCaption;
}
.footer{
    clear: both;
    background-color: bisque;
    height: 100px;
}
.content-left{
    height: 100px;
}

.content-left, .content-right, .content-footer{
    border: 1px solid black;
    margin: 10px;
}

This is just a sample of a basic responsive layout. You can easely adjust it for your needs.

SEE SAMPLE

UPDATE:

You can use media queries to make it finally responsive.

Query

@media (max-width: 700px){
    .col-left, .col-right{
        width: 100%;  
        float: none;
     }
}

Updated SAMPLE

    .wrapper{
        margin: 0 auto;
        width: 50%;
    }
    .col-left{
        float: left;
        width: 70%;
        background-color: aliceblue;
    }
    .col-right{
        float: right;
        width: 30%;
        background-color: ActiveCaption;
    }
    .footer{
        clear: both;
        background-color: bisque;
        height: 100px;
    }
    .content-left{
        height: 100px;
    }

    .content-left, .content-right, .content-footer{
        border: 1px solid black;
        margin: 10px;
    }

    @media (max-width: 700px){
        .col-left, .col-right{
            width: 100%;  
            float: none;
         }
    }

<div class="wrapper">

        <div class="col-left">
            Column left 
            <div class="content-left">
                content left content
            </div>
            <div class="content-left">
                content left content
            </div>
            <div class="content-left">
                content left content
            </div>
        </div>
        <div class="col-right">
            Column right
            <div class="content-right">
                content right content
            </div>
            <div class="content-right">
                content right content
            </div>
            <div class="content-right">
                content right content
            </div>
        </div>
        <div class="footer">
            footer
            <div class="content-footer">
                footer conten
            </div>
        </div>
    </div>