How do I make a page a certain height?

[Jamier101]

Hi,

I have a site that I'm working on and whilst I can control the width of the page I don't seem to be able to get the wrapper to remain a constant height. I have tried using the height function although this doesn't seem to produce any changes unless I enter a silly figure like 5000px.

Does anyone know how I can get round this issue?

[Demaestro]

Height should do it... can you post some of the related code and perhaps we can spot something causing the problem.

[Jamier101]

This is going to sound odd but I just reopened Dreamweaver, typed in the height function again and it worked! There must have been some glitch somewhere... that's 30 minutes of my life I'll never get back!

[Jamier101]

However, I do seem to have a problem making my footer stay in the right place:

#footer{
width:auto;
height:470px;
margin:5px;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thin dashed;
border-top-color:#999999;
}

Any ideas?

[Demaestro]

There must have been some glitch somewhere

If you were using the preview window in Dreamweaver it doesn't always display properly. Always try to preview in a browser.

something I do lots is put hieght (ie) instead of height (ei) of course it doesn't work when spelled hieght.... I spent hours on a misspelled height tag once.

For your footer... what is it doing that you don't want it to do?

[Jamier101]

I remember once spending hours with an engineer at work reading though some coding in Visual Studio trying to work out why a program wasn't working, it turned out in the end it was a bug in the software and Microsoft had no intention of fixing it!

As for the footer, I've set the page height as 550px and would like the footer to always appear in the same place on the page, I've therefore given it a height of 470px. Although I've given it these settings it still likes to freely move up and down from page to page.

Style Sheet

.blockquote{
margin:1em 3em;
color:#999999;
border-left:2px solid #999;
padding-left:1em;
}

body{
background-image:url(../images/lite_background.jpg);
background-repeat:repeat;
}

#container{
width:auto;
margin:200 auto;
height:auto;
overflow:auto;
}

#content-left{
float:left;
width:45%;
margin:0 auto;
padding-right:10px;
border-right:thin dashed;
border-right-color:#000000;
}

#content-main{
float:left;
margin:0 auto;
width:100%;
}

#content-right{
margin-left:50%;
width:50%;
}

#footer{
width:auto;
height:470px;
margin:5px;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thin dashed;
border-top-color:#999999;
}

#header{
width:auto;
height:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:black;
font-weight:bold;
}

#logo{
float:left;
width:20%;
margin:0 auto;
}

#navigation{
width:auto;
height:auto;
background-color:#999999;
}

#navigation ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#navigation li{
float:left;
}

#navigation a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#999999;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

#navigation a:hover,a:active{
background-color:#333333;
}

#spacer_horizontal{
width:auto;
height:5px;
background-color:#FFFFFF;
}

#text{
margin-left:20%;
height:100px;
width:auto;
text-align:left;
}

#wrapper{
width:1000px;
height:550px;
margin:0 auto;
border-width:thin;
border-style:solid;
background-color:#FFFFFF;
}

[enigma1]

If you want to use a fixed height for some content that changes you will need to use the overflow:scroll and specify the height

.text_box { overflow: scroll; height: 100px; }

It will enable the scroll bars.
<div class="text_box">my text</div>