I would like for the two child nodes in the code below to appear side by side. But in all my attempts they are stacked on top of each other.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Create a div to hold the control.
var controlDiv = document.createElement('DIV');
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
controlDiv.style.borderStyle = 'ridge';
controlDiv.style.width = '500px';
// Set CSS for the control border
var controlMC = document.createElement('DIV');
controlMC.style.position = 'relative';
controlMC.style.width = '20%';
controlMC.style.backgroundColor = 'white';
controlMC.style.borderStyle = 'solid';
controlMC.style.borderWidth = '2px';
controlMC.style.cursor = 'pointer';
controlMC.style.textAlign = 'center';
controlMC.title = 'Click to set the map to Home';
controlDiv.appendChild(controlMC);
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Center';
controlMC.appendChild(controlText);
//////////////////////////////////////////////////////////////
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.position = 'relative';
controlUI.style.width = '20%';
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to RoadMap';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Map';
controlUI.appendChild(controlText);
function myload() {
document.getElementById('myDiv').appendChild(controlDiv);
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="myload()">
<div id="myDiv">
</div>
</BODY>
</HTML>
Comment