Q:

CSS Layout Constrained To Browser Window?

I have spent at least 10 hours trying to figure out how to achieve the depicted layout with HTML and CSS and I've come up with nothing. I have searched endlessly and while a lot of answers seem to come close, I can't quite tweak it into place.
I just want to make a simple browser app that has a header, footer, menu bar on the left, and a map with a nav bar as the main content. I want the map to be constrained to the content div and not just "overflowing-but-hidden". And I would love if there were never any scrollbars, if everything just fit in place. Is this possible with CSS?

PLEASE PLEASE, I'm dying here!

A:

Of course you could just position everything fixed, it sounds to me as if you want something like that. (Concerning "never any scrollbars, everything just fit in place".)
If that is what you want, you could do something like the following:
body,#header,#menu,#footer,#content {
  position:fixed;
  margin:0;
  padding:0; 
}
#header {
  top:0;
  left:0;
  right:0;
  width:auto;
  height:40px; 
}
#menu {
  left:0;
  top:45px;
  bottom:35px;
  height:auto;
  width:120px; 
}
#footer {
  bottom:0;
  left:0;
  right:0;
  width:auto;
  height:30px; 
}
#content {
  right:0;
  top:45px;
  bottom:35px;
  left:125px;
  min-width:200px;
  min-height:200px;
  height:auto;
  width:auto; 
}
#navbar {
  position:relative;
  height:30px;
  display:block;
  min-width:200px;
}
#map {
  position:absolute;
  top:30px;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:auto; 
}

With something like this, every element will be and stay in place, and just the content will resize with the window. Although I must admit, that I didn't really get the point of what you requested. I hope this kind of suits your needs.
To be honest, I kind of find your question a little bit odd, as you seem to be in need to learn some of the CSS basics.

