resize container div's contents without scrollbars?

is there a tag or css function that would resize my container div (and it's contents) proportionally to the size of the browser window, no matter what the browser size. therefore, there would be no scrolling, but no information on the page would get cut off.

The webpages look great on a larger imac screen, but on a powerbook or macbook air, information gets cut off.

Here is my css thus far:

[CODE]

body {
padding:0;
margin:0;
height: 100%;
overflow-y: scroll; /* ie6 value b/c !important ignored */
overflow-y: hidden !important;

}
#bottom {
background-color:#FFFFCC;
position: fixed !important;
position: absolute; /* ie6 value b/c !important ignored */
width: 100%;
bottom: 0px;
z-index: 5;
height:100px;
}


.links {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
float: left;
}




a:link {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
text-decoration: none;
font-size: 10px;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
color: #666666;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
}
#containter {
font-family: Arial, Helvetica, sans-serif;
position: relative;
min-height: 100%;
height: 600px;
}

#containter2 {
font-family: Arial, Helvetica, sans-serif;
position: relative;
min-height: 100%;
width: 985px;
}
#footer2 {
width: 969px;
margin-top: 85px;
margin-left: 0px;
padding-left: 0px;
position: absolute;
top: 500px;
}

[ICODE]

The webpages look great on a larger imac screen, but on a powerbook or macbook air, information gets cut off. Can we have a link to your page?

of course!

http://www.fingerspitzengefuehl.org/wvtriplex.html

The webpages look great on a larger imac screen, but on a powerbook or macbook air, information gets cut off.
overflow-y: hidden !important; Isn't the issue due to the above CSS property applied to body tag?

"overflow-y: hidden !important;
Isn't the issue due to the above CSS property applied to body tag?"


when "overflow-y: hidden" is removed, there is no scroll bar. however the image and text are cut off unless the viewer can adjust the browser window and depending on screen size, still cut off.

when "overflow-y: hidden" is removed, there is no scroll bar.
Remove all overflow property from body selector and change the remaining CSS like
.cell {
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
height:85px;
line-height:100%;
margin-left:725px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;
padding-top:8px;
}
.text {
margin-bottom:4px;
margin-left:725px;
margin-right:0;
margin-top:4px;
padding-left:4px;
text-align:left;
}


Or I'd recommend you to check the layout at http://bonrouge.com/2c-hf-fluid%28r%29.php. You could attain your goal by just setting a position:fixed; to the footer.

If your content takes up more height than a 15" screen can show you are going to have to either scroll the element or lower the height of your element. Resizing the div doesn't resize the user's screen.