[omega999]

Hello I've been looking for a way to get the wrapper to be fixed full height no matter how much text there is to give it a consistent look. I've tried various ideas from several forums but so far no luck. Any ideas?

Thanks

body {
	background: url(-/images/bg.gif) repeat-y center top;
	margin: 0 0 20px 0;
	padding: 1;
	height: auto;
}

#wrapper {
	margin:0 auto;
	width:960px;
	height:1000px;
	border: 1px; solid #000000;
	padding: 0;
	-moz-box-orient: verticel;
	-webkit-box-orient: verticel;
	-mox-box-flex: 1;
	-webkit-box-flex: 1;
}
 
 article {
	 border: 1px solid #999999;
	 padding: 20px;
	 margin-bottom: 15px;
 }
 
 header {
	background: #ffffff;
	border: 1px solid #999999;
	padding: 20px;
	margin: 0 auto;
	text-align: center;
	width: 960px
}
article {
	background: #FFFBB9;
	border: 1px solid #999999;
	padding: 20px;
	margin-bottom; 15px;
}

footer {
 	clear: both;
 	text-align: left;
 	padding: 20px;
 	border-top:2px solid #999999;
 	height 100%;
}

[Slice]

Try adding

html {
        height: 100%;
}

body {
	background: url(-/images/bg.gif) repeat-y center top;
	margin: 0 0 20px 0;
	padding: 1;
	height: 100%; /* changed to 100% */
}

#wrapper {
	margin:0 auto;
	width:960px;
	height:auto; /* Auto height so it expands when more content added */
	min-height: 100%; /* Will fill the page until more content is added */
	border: 1px; solid #000000;
	padding: 0;
	-moz-box-orient: verticel;
	-webkit-box-orient: verticel;
	-mox-box-flex: 1;
	-webkit-box-flex: 1;
}

Basically making you page heights full (setting at 1000px is bad because you don't know the resolution of every users screen).

Then make your wrapper expand automatically when content is added.

Hope this helps

This post has been edited by Slice: 26 January 2012 - 06:24 AM

[omega999]

Thanks for that, now I'm having the problem of trying to keep the footer at the bottom of the wrapper, and I've tried both normal & div. but whenever the webpage get's too big it won't stay in the bottom centered correctly.

footer {
  width: 1000px;
  height: 60px;
  font-size: 14px;
  line-height: 60px;
  text-align: center;
  color: #999;
  border-top: 1px solid #333
  backgrounnd:#099
  clear: both;
  position: absolute;
  padding: 0 10px;
  bottom:0;
}

Thanks again.