CSS Div Overlap probelm

[newonehere66]

I am having a bit of a problem with my divs overlaping when the browser window is minimized.
I am displaying a map and a data table side by side when a button is clicked.
The button clicked function is working so far displaying both div's side by side.
But when the browser window is minimized the div on the right(tabe data) overlaps over the map div on the left.
What I would like is to have both div's(left(map)/right(table data)) displayed side by side and when the browser windows gets minimized that both divs adjust automatically to the screen.

Here is what I ahve so far.

.map {
    border-style:solid;
    border-width:1px;
    border-color:White;
    -webkit-box-shadow: 0px 0px 9px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 9px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 9px rgba(50, 50, 50, 0.75);
    position:absolute; 
    right:10px; 
    left:275px; 
    top:135px; 
    bottom:10px;

}

.main {
    width:auto;
    display:table;
    top:135px; 
    left:275px; 
    bottom:10px;
}

#left {
    border-style:solid;
    border-width:1px;
    border-color:White;
    position:absolute; 
    right:10px; 
    left:275px; 
    top:135px; 
    bottom:15px;
    float:left;
    display:table-cell;
    width:40%;
    overflow: hidden;
}

.clear {
    clear:both;
}

.mapSplit {
    border-style:solid;
    border-width:1px;
    border-color:White;
    position:absolute; 
    right:10px; 
    left:275px; 
    float:left;
    top:135px; 
    bottom:15px;
    width:40%;
    display:table-cell;
    -webkit-box-shadow: 0px 0px 9px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 9px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 9px rgba(50, 50, 50, 0.75);
    overflow: hidden;
}

#right {
    position:absolute; 
    right:20px; 
    left:700px; 
    top:135px; 
    bottom:15px;
    float:right;
    display:table-cell;
    width:40%;
    overflow: hidden;
    }


<div id="main" class="main">
    <div id="left">
        <div id="map" class="map"></div>
    </div>
    <div id="right">
        <div id="grid" class="right"></div>

    </div>
</div>

Here is my table in the style sheet.

table.gridtable {
    float:right; 
    overflow:auto;
    overflow-x:hidden;  
    position:absolute; 
    font-family: verdana,arial,sans-serif;
    font-size:12px;
    color:#333333;
    border:1px;
    border-style:solid;
    border-color:green;
    border-collapse: collapse;
    -webkit-box-shadow: 0px 3px 10px rgba(50, 50, 50, 0.91);
    -moz-box-shadow:    0px 3px 10px rgba(50, 50, 50, 0.91);
    box-shadow:         0px 3px 10px rgba(50, 50, 50, 0.91);
    vertical-align:middle;
    text-align:center;
    width:auto;
    height:auto;
}
table.gridtable th {
    border-width: 0px;
    padding: 8px;
    border-style: none;
    border-color: #666666;
    color:White;
    text-align:center;
    margin:5px 7px 5px 7px;
    background: #bfd255; /* Old browsers */
    background: #a4b357; /* Old browsers */
    background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */
    vertical-align:middle;
}
table.gridtable td {
    width:20px;
    height:auto;
    border-width: 0px;
    padding: 5px;
    border-style: none;
    background: #f6f8f9; /* Old browsers */
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
    text-align:center;
    vertical-align:middle;
}
table.gridtable td:hover {
    width:20px;
    height:auto;
    border-width: 0px;
    padding: 5px;
    background: #fefefd; /* Old browsers */
    background: -moz-linear-gradient(top,  #fefefd 0%, #dce3c4 42%, #aebf76 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefd), color-stop(42%,#dce3c4), color-stop(100%,#aebf76)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=0 ); /* IE6-9 */
    text-align:center;
    vertical-align:middle;
}

[JameB]

<div id="right">
    <div id="grid" class="right">
    </div>
</div>

You should have id="right" instead of class="right".

Also, if you're using float: left and float: right, make sure the width is never exceeding 50% of the screen. (I suggest 45%)