CSS Div Overlap probelm

Question

newonehere66 0 Newbie Poster

14 Years Ago

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;
}

html-css web-design

Edited 14 Years Ago by newonehere66

2 Contributors
1 Reply
205 Views
23 Minutes Discussion Span
Latest Post 14 Years Ago Latest Post by JameB

Dani AI

Generated 7 Months Ago

described a classic CSS conflict: mixing absolute positioning, floats and table-cell behaviors will produce overlap when the viewport shrinks. correctly spotted the id/class mismatch (inner element had class="right" while styles target #right) — fixing that is the first step because inconsistent selectors can hide intended rules. Beyond that, the bigger issue is layout strategy: absolute-positioned children do not participate in normal flow, so they won’t reflow next to each other as the window narrows.

A simple, modern fix is to stop absolutely positioning the left/right panels and use a responsive flexbox container. The panels can be allowed to shrink with sensible min-width values, and the table can be wrapped in an overflow:auto container so it scrolls instead of overlapping. Example structure and CSS:

<div class="layout">
  <section class="col-left"><div id="map" class="map"></div></section>
  <aside class="col-right"><div class="table-wrap"><table class="gridtable">...</table></div></aside>
</div>

.layout { display:flex; gap:10px; align-items:stretch; }
.col-left { flex: 2 1 60%; min-width:300px; }
.col-right { flex: 1 1 40%; min-width:260px; }
.table-wrap { overflow:auto; max-height:60vh; }

@media (max-width:800px) {
  .layout { flex-direction:column; }
  .col-left, .col-right { width:100%; min-width:0; }
}

Troubleshooting notes and cautions: remove position:absolute/float from the panels (keep box-sizing:border-box for predictable sizing); keep total flexible bases under 100% as suggested; use media queries to stack columns on small screens. If a JS map library is used, remember many map widgets need a resize notification after container changes (for example, Leaflet map.invalidateSize() or Google Maps google.maps.event.trigger(map,'resize')), then recenter the map. Checklist: fix selector mismatch, replace absolute layout with flexbox (or grid), add min-width and media-query stacking, and wrap the table so it scrolls instead of overlapping.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

JameB 66 Junior Poster · Answer 1 · 2012-07-25T13:32:53+00:00

<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%)