views:

44

answers:

1

So I'm trying to create this layout.

Here is a picture of the 3 "boxes" that constitute the page: https://dl.dropbox.com/u/9699560/layout.jpg

And here is my attempt: https://dl.dropbox.com/u/9699560/map.html

The red box is a Google Map, so if its height isn't specified, it shrinks to zero. What I am trying to do is the following:

The green box is fixed width, fixed height. The blue box should occupy 20% of the vertical height of the page, with a maximum height of 100px. The red box should occupy all of the remaining vertical space.

If anyone can figure that out, I'd like to go a little farther, such that when the browser window is expanded vertically and the blue box's top reaches the level of the green box's bottom, it expands left to occupy 100% of the page width.

I've tried floats, absolute, and relative positioning and I cannot get this to work with pure CSS. If I have to, I will use JavaScript, but I would like to avoid that unless it's the only option.

Thanks!

Here's an attempt (remove comments if you use it):

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#nav {
    position: relative;
    width: 200px;
    height: 400px;
    background-color: green;
}

#map {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 80%; // If #footer is 200px, should occupy all available space
    background-color: red;
}

#footer {
    position: absolute;
    left: 200px; // Should "become" 0 when window height pulls it past #nav
    right: 0;
    bottom: 0;
    height: 20%;
    max-height: 100px;
    background-color: blue;
}

and the HTML

<html>
    <head></head>
    <body>
        <div id="nav"></div>
        <div id="map"></div>
        <div id="footer"></div>
    </body>
</html>
A: 

In my opinion, you will need JavaScript to implement this.

My starting point would probably be from this markup, maybe implement the min/max height behaviors in an event handler that fires on resize :

CSS

html, body { margin: 0; padding: 0; }
#nav { background-color:green; width: 200px; height: 400px; float:left; }
#map { background-color:red; height: 80%; margin-left: 200px; }
#footer { background-color: blue; height:20%; }

HTML

<div id="nav">nav content</div>
<div id="map">map content</div>
<div id="footer">footer content</div>
babtek