CODEWITHSUNDEEP
javascripthtmlgoogle-maps
mkyong
mkyong

Reputation: 12947

HTML Content to Right of Google Map

I'm trying to add a menu to my Javascript program that will allow a user to do a variety of different things. I'm not much of an HTML guru so I don't know how to keep the menu at the top and right of the page. I tried using a div, but it just put it under the map instead of right of it. Here's a screenshot of what it looks like in the browser: enter image description here

The whitespace on the right is where I would like to put the menu. Can anyone provide an example of how I would put a table there? Here's how the body of my HTML is now:

  <body onload="initMap()">
    <div id="map_canvas" style="width:85%; height:100%"></div>
  </body>

Upvotes: 3

Views: 2493

Answers (2)

Jim
Jim

Reputation: 2310

<body onload="initMap()">
    <div id="wrapper"> <!-- not strictly necessary, but good practice IMHO -->
        <div id="map_canvas" style="float:left; width:80%; height:100%">
        </div>
        <div id="your-new-div" style="float:right; width:15%;">
        </div>
    </div>
</body>

A div would be a better solution here than a table...try the above and let me know how you make out.

The float:right will stick the menu to the right side of the screen. I always set my total width to be slightly less than 100% -- this way, when you inevitably add padding/margins, you'll have a bit of wiggle room.

Upvotes: 2

scald
scald

Reputation: 729

To get two DIV's side by side (touching), I usually set both to float:left. Something like this:

   <body onload="initMap()">
    <div id="map_canvas" style="float:left; width:85%; height:100%"></div>
    <div id="map_side" style="float:left; width:15%; height:100%"></div>
   </body>

If you specify float:right on the second div, it will "stick" to the right side of the browser window instead of to the div next to it.

Upvotes: 4

Related Questions