100 % height..?

[rule69]

<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#wrapper {
width: 956px;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
border: 1px solid #DDDDDD;
}
#header {
margin: 0px;
padding: 0px;
height: 100px;
width: auto;
background-color: #f1f1f1;
}
#container {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-attachment: scroll;
background-image: url(back.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 160px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
width: 130px;
}
#nav li a:hover {
color: #999999;
text-decoration: none;
}
#center {
height: auto;
width: 504px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
line-height: 1.8em;
}
h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#right {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
height: auto;
width: 160px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #F1F1F1;
}
#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}
#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}
-->

 

im trying to get the wrapper to be 100% but its not working.. my style is all shrinked and only expands wen theres content :/ can some look into this...

[chordsoflife]

You can't set 100% height, but you can do something like "min-height: # px;", and then overflow will make it larger.

[blu3t00th]

Wrong you can set 100% height

 

ex

html, body, .className {height: 100%;}

or

html, body, #idName {height: 100%;}

[TheFilmGod]

First of all, I would recommend getting a book on CSS. Your code could use a complete revamping. E.G. css id names are completely useless, - what the hell is a container or wrapper? - You do not have to say:

 

margin-left: auto;

margin-right: auto;

margin-top: 0;

margin-bottom: 10px;

 

instead say:

 

margin: 0 auto 10px auto;

 

and you also specify in body {} text-align: center; ..... but you center the parent div as margin: 0 auto;

 

--- > That is foolish, as that method is deprecated and you have only used it to support old browsers like IE5, which are extinct (almost).

 

........................

 

Once you get those and other things straighten out beforehand, come back for help. Let us fix one thing at a time....

[GameYin]

Min height would work.