How can I position custom controlUIs in Google Maps V3?

Question

I have created two custom controlUIs in Google Maps based on existing default examples. They work nice but I realised they are displayed vertically:

But I want them displayed horizontally:

The CSS definintions for both custom Controls looks the same (except the image of course):

// Add marker control
var optionDiv = document.createElement('div');

// Same for second control UI (centerPlayer) but for simplicity reasons not added
var CenterMarker = new centerMarkerButton (optionDiv, this.map);

    optionDiv.index = 1;
this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(optionDiv);

...

function centerMarkerButton (controlDiv, map) {

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '8px';
        controlUI.style.marginRight = '10px';
        controlUI.style.paddingTop = '3px';
        controlUI.style.paddingLeft = '3px';
        controlUI.style.paddingRight = '3px';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.innerHTML = '<a><img src="https://www....centermarker.svg" height="28px" width="28px"</a>';
        controlUI.appendChild(controlText);

        // Add click event listener
        controlUI.addEventListener('click', function() {
            instance.centerGame();
        });
    }
}

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '8px';
        controlUI.style.marginRight = '10px';
        controlUI.style.paddingTop = '3px';
        controlUI.style.paddingLeft = '3px';
        controlUI.style.paddingRight = '3px';
        controlUI.style.paddingRight = '3px';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.innerHTML = '<a><img src="https://www..../centeruser.svg" height="28px" width="28px"</a>';
        controlUI.appendChild(controlText);

Code analysis inside the displayed google maps in browser showed me there is a simple DIV around both custom Controls but it has no ID, so I can't access/modify it.

Anyone has an idea how I can set/display these two custom Controls vertically?

Answer 1

Dang, just found the answer by myself. I had to add these CSS styles to both controlUIs:

controlUI.style.cssFloat = 'left';

Now the controls appears horizontally (next to each other).