No replies
scott.h
Offline
newbie
Last seen: 10 years 17 weeks ago
Joined: 2009-08-07
Posts: 1
Points: 0

I can't get this to work for the life of me... so I am forced to humble myself to this forum Smile

Goals:
1. Create a "content" area with a 10 pixel border that auto adjusts (width and height) to the browser window.
2. When browser is resized above text height, scroll bars appear. When text is hidden below browser frame, scrolling down sill stop at bottom of text (border is visible).
3. When browser is resized below text height, scroll bars disappear but both divs (container and inner) continue to adjust beyond text to edges of browser window (with the border intact).

Note: really, this should be much more straight forward!!!! Both browsers (ie 7 and ff2 seem to be having the same issues - except, sometimes ie adds extra space to either the right "padding" or to the bottom "margin"). I've played with dozens of configurations - none solve ALL issues.

Please HELP. Here's what I have so far...

---------------

Untitled 1

* {
margin: 0px;
padding: 0px;
border: 0px;
}

html, body {
height: 100%;
background-color: white;
}

#container {
width: auto;
min-height: 100%;
padding: 10px 10px 10px 10px; /*top, right, bottom, left*/
background-color: blue;
}

#inner {
float: left;
width: 100%;
background-color: red;
}

this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.