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?
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;}