Forum Moderators: not2easy

Message Too Old, No Replies

How do I make a page a certain height?

         

Jamier101

9:11 pm on Oct 8, 2010 (gmt 0)

10+ Year Member



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

9:20 pm on Oct 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

Jamier101

9:34 pm on Oct 8, 2010 (gmt 0)

10+ Year Member



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

9:39 pm on Oct 8, 2010 (gmt 0)

10+ Year Member



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

10:12 pm on Oct 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

10:39 pm on Oct 8, 2010 (gmt 0)

10+ Year Member



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

12:42 pm on Oct 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>