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..

    CSS: How to get lines to “line up” accross different columns?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How to add a centered div that fades-in from the top over my content?

    How to create custom archive page on Tumblr

    How can I include a HTML-encoded “content:” character in CSS? [duplicate]

    how to position several div tags over each other

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control

    How to make a responsive mosaic css fullscreen width

    How to id dom table so I can position it on page?

    How to add and use jquery and css file in joomla module..?

    How do I draw the lines of a family tree using HTML CSS?

    How to mix colors in CSS?

    How to fit content of a DIV with fixed height

    Ionic2 : How to set up css in single page

    How to change CSS in media tag within @media only tags with jquery?

    How to use Javascript to check and load CSS if not loaded?

    How to put CSS and HTML in one page of code? [duplicate]

    How do I focus image from the center (CSS focus)?

    How to use scss with css modules / postcss inside components

    iphone - How to implement the effect of “float” for image, just like in CSS style

    Using jquery to swap text, how to revert other text to original?

    How can I use d3.js filter to assign different css classes to elements?

    How to control a

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    How to swap class / id using jquery in a css list?

    How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

    How to change text transparency in html/css?

    How to apply a css rule based on the number of siblings an element has? [duplicate]

    How to prevent span from growing with content