ansaurus

Question

CSS: 2 DIVs, one takes a fixed size, other one fills up the remaining space

Answer 1

+1 A:

hi,

Have a look at this: keeping footers at the bottom of the page

All the code is there. Basically you do this in your HTML:

<html><body>
<div id="container">
   <div id="map"></div>
   <div id="footer"></div>
</div>
</body></html>

And then in your CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#map {
   padding:10px;
   padding-bottom:25px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:25px;   /* Height of the footer */
}

There are other ways to achieve this and similar effects. Let know if this is what you wanted.

Hope this helps.

kfrej 2009-11-11 20:40:41

Unfortunately, it does not. The map I'm using is Google maps, and it will be only 10px high when I use this code.

ChaosR 2009-11-11 22:06:26

Can you show the code you're using to embed the map? Are you using standard Google Maps iframe solution?

kfrej 2009-11-11 22:29:46

I fixed it using javascript, still looking for the CSS solution though. Here's the link: http://zanzibar.idlesoft.net/geomap/

ChaosR 2009-11-13 11:36:45

ansaurus

tags:

views:

answers:

CSS: 2 DIVs, one takes a fixed size, other one fills up the remaining space

related questions