div inside div

[TheCondor]

Hello,

I need to modify the code from a colleague. We want to use one <div> to show an error or success message if required and another to show different stacked images. Each image contain a geoinformation layer. He produce the following code:

<div id="mapMainContainer" style="background-color:#4D6FAE ;border:1px solid #00FF00; margin-left:240px;margin-top:-300px;">
 <div id="messageSpan" class="messageSpan" style="width:100%;position:absolute;z-index:250;" ondragstart="return false" onselectstart="return false">
 </div>
 <div id="mapSpan" style="background-color:#FEE586; border:1px solid #0000FF; z-index:1;position:relative;width:100%;height:100%;">
 <div id="mapa" style="background-image:url(transparent.gif);border-spacing:0px;position:absolute;z-index:7;width:100%;height:100%;border:1px solid black;cursor:crosshair;" onselectstart="return false" onmousedown="if (is_nav) {event.preventDefault();}";>
 </div>
 </div>
</div>

where:

- mapMainContainer, as the name says, contain all the objects and this <div> is also inside the main-content <div> from the Web page.
- inside messageSpan will be show an error or success message, at the top of the content.
- mapSpan contain another <div> and the <div> 'mapa' contains all the images.

The Web page use Javascript code to insert or delete a geoinformation layer and react also when the user resize the browser.

The problem is that when the user resize the browser(maximize or just resize), all the <div>s are no more correctly ordered. The Javascript code to resize the window is:

for (var sid in layersByServer) {
 for (var j=0;j<layersByServer[sid].length;j++) {
  var currentLayerId=layersByServer[sid][j];
  var imgId = 'maplayerimg_'+currentLayerId+'-'+sid;
  var img = document.getElementById(imgId);
  img.style.height=(mapSize[1]-235)+"px";
  img.style.width=(mapSize[0]-275)+"px";
 }
}
document.getElementById('mapSpan').style.width = (mapSize[0]-275)+"px";
document.getElementById('mapSpan').style.height = (mapSize[1]-235)+"px";
document.getElementById('mapa').style.width = (mapSize[0]-275)+"px";
document.getElementById('mapa').style.height = (mapSize[1]-235)+"px";

What is wrong? Are the html code not correct or is a problem from the Javascript? Please help.

Regards

A.

[webboy1]

Hi. Welcome to Webmaster World.

I'm not sure exactly the cause of this, but I'd hazard a guess that it's to do with the "Absolute" positioning on a couple of your divs. No matter how big the browser re-sized, an absolute Div will remain exactly where it was, meaning some of your other divs might start wrapping around it.

As for the javascript for resizing the page, I assume this means you have a "Resize" option on the pages somewhere?