How to display a side panel on the left and Google maps api canvas on the right, filling remainder of page?

Tags: javascript,css,google-maps-api-3,position,positioning

Problem :

I need to be able to have a side panel that fills the height of the page on the left and a map filling the rest of the page on the right. I would like the side panel to have a width of 300px, regardless of the size of the browser with the map to the right of it. Also, I am not able to move any of the divs within #panel, they are all just aligned one after the other. Here's my css:

body {margin:0;}
        #panel {height:100%; width:300px; position:absolute; padding:0;background-color:#8C95A0;}
            #div1 {padding:2px; text-align:center}
            #div2 {padding:2px; text-align:center}
            #div3 {padding:2px; text-align:center}
            #div4 {padding:2px; text-align:center}
            #div5 {padding:2px; text-align:center}
                #div5a {padding:2px; text-align:center}
                #div5b {padding:2px; text-align:center}
                #div5c {padding:2px; text-align:center}
            #div6 {padding:2px; bottom:0px; text-align:center}
        #map_canvas {height:100%; width:1200px; left:300px; position:absolute; padding:0;}

How can I make #map_canvas fill the rest of the page and how can I move my divs?

Solution :

I was able to fix the two problems I enquired about in my question. Firstly, I was able to use relative positioning to move my divs around in the side panel instead of absolute. Secondly, I used the following css to make the map fill the rest of the screen, to the right of the side panel:

#map_canvas {height:100%; left:300px; right:0px; position:absolute; padding:0; margin:0;}

    CSS Howto..

    Jquery-How to grey out the background while showing the loading icon over it

    How do I use CSS to centre this content?

    How to overflow in CSS/HTML? [closed]

    How to keep CSS style If I change the html content dynamically?

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    How to make a centered, responsive CSS circle within a Boostrap div?

    How do I stop richfaces adding borders to panels and calendars?

    How to make a floated div 100% height of its parent?

    How are table cell widths calculated in html?

    How to convert this xpath to css?

    How to position a CSS sprite background image within the element?

    How to make image previews (thumbnails) using html/css

    How are these check-marks being drawn?

    How do I overlay a gradient (background) on top of a border?

    How to add code area css style to HTML

    how to make tab bar in jquery mobile?

    How to bottom-align these divs?

    How to push content div to footer div while keeping background in the picture

    How do I move the background image of a DIV based on the scrollbar movement?

    How to zoom in / out depending on browser height, using CSS zoom property? [closed]

    Foundation 5-How to center position the class 'row' regardless the browser size?

    how to size the silverlight object to available space

    how to change width of without affecting width

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    CSS: How to get rid of scroll (except when there's additional content)?

    How Do I Place An Image To The Right of a Body of Text?

    How to create responsive text on top of an image?

    How can I increase the size of twitter bootstrap carousel navigation arrows

    HTML And CSS and Javascript: How to make a onclick even remove text in input text fields

    How to vertical-align text on this input box for IE