3

I want to use two DIVs, side by side. First DIV with responsive width and with google map inside... And second DIV with fixed width.

jsFiddle example

HTML 

<div class="wrapper">
    <div id="map"></div>
    <div class="right"></div>
</div>

CSS 

.wrapper{
    width: 90%;
    margin: 0px auto;
}
#map {
    height: 300px;
}
.right {
    background: orange;
    width: 250px;
    float: right;
    height: 300px;
}
Patrik
  • 1,269
  • 7
  • 30
  • 49

1 Answers1

2

EDIT delete js resize / correct css +fiddle

http://jsfiddle.net/FXk4x/10/

JS

var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(50, 10),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var markers = [];

Use css position :

CSS

*{
  margin:0;
  padding:0;  
}

.wrapper{
    margin-top:10px;
    border:solid 1px red;
    position :relative;
    width: 90%;
    margin: 0px auto;
    height:300px;
}
#map {

    position :absolute;
    top:0;
    left:0;
    bottom:0;
    right:250px;

  border: 1px solid;
}
.right {
  position : absolute;
  top:0;
  right:0;
  background: orange;
  width: 250px;    
  height: 300px;
}

FAQ CSS position here

ColoO
  • 813
  • 5
  • 14
  • Thank you. :) But no, it does not work well. I dont want to set absolute position to google map. And if I try to set absolute position to google map, it stops work. And when I dont set absolute position to map and map is showing well, there is a problem with second div... you can see and try it here : http://jsfiddle.net/fLwwV/ – Patrik Nov 20 '13 at 15:15
  • 1
    I had resize javascript and i fixed the left position of #map. Its work for me – ColoO Nov 20 '13 at 15:58
  • Yeah, now it is better, but when you resize browser... google maps defrorms. – Patrik Nov 20 '13 at 16:07
  • oh i don t need the resize js :p – ColoO Nov 20 '13 at 16:08