ansaurus

Question

Two divs positions

Answer 1

A:

It was flaking a little in Safari, so I had to wrap the #map div in another div to resolve the issue. Try this:

<html> 
    <head> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; 
        <style> 
            body, html
            {
                width: 100%;
                height: 100%;
            }

            body
            {
                margin: 0;
            }
        </style> 
    </head> 
    <body> 
        <script> 
            $(document).ready(function () {
                    var city = new google.maps.LatLng(56.3, 44)

                    var mapOptions = {
                        zoom: 12,
                        center: city,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    map = new google.maps.Map($('#map').get(0), mapOptions)
            })
        </script> 
        <div id="toolbar" style="float: left; width: 200px;">left</div> 
        <div style="margin-left: 200px;">
            <div id="map" style="width: 100%; height: 100%;"></div>
        </div>
    </body> 
</html>

Brian Ray 2010-09-13 13:04:05

There is horizontal scrollbar now.

Ockonal 2010-09-13 13:21:02

Hmm...is it about 200 pixels of horizontal scroll? Also, do you still have width: 100% in the #map style?

Brian Ray 2010-09-13 13:32:13

yeah, the scroll is ~200 pixels

Ockonal 2010-09-13 13:50:09

@brian-ray, the code is updated

Ockonal 2010-09-13 13:52:23

Make sure that the div with the id of map doesn't have width: 100%; in it's styles. I'm assuming that is what is causing the horizontal scrollbar.

Brian Ray 2010-09-13 13:53:14

@brian-ray now it has the 200px area to the right of the map.

Ockonal 2010-09-13 14:11:39

Answer 2

A:

try this if you are not using css reset:


<div id="toolbar" style="float: left;width: 20%;margin:0;padding:0">left 
<div id="map" style="float: left;width: 80%;height: 100%;margin:0;padding:0">

lakhlaniprashant.blogspot.com 2010-09-13 13:05:54

The toolbar changes it's own size when resizing

Ockonal 2010-09-13 13:21:45

The OP wants the toolbar to be 200px, not 20%.

Brian Ray 2010-09-13 13:31:08

ansaurus

tags:

views:

answers:

Two divs positions

related questions