100% width, height div inside of 100% width, height div
Posted: 10 August 2009 01:30 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2009-08-10

I can’t get this to work for the life of me… and hope somebody here can help.

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).
4. No quirks mode.

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. The following example does resize the divs (bot inner and container) for any content placed in it, and works great as long as the browser window is not extended past the “content” area. Once the window is resized past the content area, the div won’t adjust vertically… even if I put in height or min-height 100%.

Please HELP. Here’s what I have so far…

———————-

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled 1</title>

<style type=“text/css”>

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

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

#container {
width: auto;
min-height: 100%;
padding: 10px 10px 10px 10px;
background-color: blue;
}

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

</style>

</head>

<body>

<div id=“container”>
<div id=“inner”>
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.

</div>
<div style=“clear: both;”></div>
</div>

</body>

</html>

Profile