...

View Full Version : resize container div's contents without scrollbars?



cbombard
07-30-2010, 05:00 PM
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]

abduraooft
07-30-2010, 05:15 PM
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?

cbombard
07-30-2010, 05:19 PM
of course!

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

abduraooft
07-30-2010, 06:41 PM
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?

cbombard
07-30-2010, 08:14 PM
"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.

abduraooft
07-31-2010, 09:53 AM
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.

wildreason
07-31-2010, 11:46 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum