How to resize left floating div to accommodate right floating DIV?

Question

How can I set up 2 html div tags, one float left (actually containing the Google Earth Plugin), one float right (initially hidden)?

The content of the right div will be dynamically populated with a number of different dialogs and then made visible. Once visible it's width can expand further.

I need the left div to shrink to accommodate the right div when ever the right div toggles from invisible to visible or whenever it's width adjusts.

Answer 1

Just adjust the width of your left div with some javascript? Depending on your layout you can use % or px or whatever you prefer.

Here´s a really simple example showing how to do it with a percentage based layout:

HTML

<div class="l">LEFT</div>
<div clasS="r">RIGHT</div>
<br>
<a>TOGGLE R</a>

JS

(function($) {
    var visible = false;

    $("a").click(function(event) {
        event.preventDefault();

        $("div.r").toggle();
        $("div.l").css("width", 50+(visible*50)+"%");
        visible = !visible;
    });

})(jQuery);

Try it out in the fiddle here: http://jsfiddle.net/ZbzL5/

Answer 2

Here an example:

You have to make an event when the new div is get visible and change the width of the left div.

JS:

$(function(){
    $("button").click(function(){
        var precSize = $("#width_input").val();
        var parentWidth = $(".wrapper").width(); 
        var leftOldSize = $(".left").width();
        var newSize = parentWidth * ( (100 - parseInt(precSize)) / 100);
        $(".left").width(newSize);
        $(".right").width( $(".right").width() + (leftOldSize - newSize));
    });
});

jsFiddle

Answer 3

basically to make google earth aware that div size changed you need

google.maps.event.trigger(map, "resize");

reference : so g map resize But in your scenarion you can also trigger the abovein the resize event of the right div using jquery. $('div').bind('resize', function(){})