HTML - Web Page, Dynamic Height

I am trying to make a page that has a DTML (dynamic expanding links), and a right hand column - Below is my code.

I want to make the right hand colunm (most common questions grey area) a fixed height.

It seems to be the length of the page as if all the menus are clicked on and opened even if they are closed.

How can I make it a fixed height regardless of how many links (dhtml) are opned or not so that most common questions are no longer than say 500 pixles.

Any suggestions would be handy. I can send code / page as its to long to paste here!


Thanks,
Ryan

it sounds stupid, but i have a problem with a page that inspired me to ask about it

Hi.

What is the best way to make something, lets say a table or a div for example, span the entire height of the page?

I don't have any example code i'm just asking for future reference. Please ask if you need more detial or don't understand what i'm talking about.

Thanks in advance for any replies.

hello Every can any one tellme How can i make a webpage open in Fixed height and Width which is to be opened by a Hyperlink

Example : like when you click On MORE link From The Smilies in this Forum it open a Small Window Resizeble Window

Is there anyway to make a container DIV LAYER that contains multiple other layers to extend just as far as its contained layers vertically? By this I mean, can you set the height of a div layer to extend to the bottom of the page instead of stopping exactly at where that layer's content stops? I know I could always set the height to a fixed high number, but I don't want all that extra scroll space at the bottom.

I've made an example page to better explain what I mean:

http://www.willamette.edu/~nsawir/tester222.html


See how the white background with black side borders (this is my container div layer) only goes as far as the black text? This black text is the content of that one div layer. The white background and black borders do not extend down to where the red text reading "THIRD LAYER OF ITEMS" (this would be my third div layer) is.

I would like the white background/black border of my container layer to extend to the very bottom of the page, where ever it may be (and no further). Is there any way around this???

PLEASE HELP!!!!!!

Hi im aware how to fit the width of a page so it fills the browser window but im curious on how to set the height of the page?

the width works perfectly and just the height im stuck with

the page is displayed well in IE6, IE7, firfox 3, but not in firefox 2
no matter wht is the height of the page it only shows part of it (about 800px height)
how can i solve that????? (i'm working locally)

thnx in advance :hat:

The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page.

It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page.

Here's a link to the page (apologies for the file size)
link to page

I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok?

I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class).

Thanks for any help.

Hi Everyone,

I'm slightly confused by this one. But i'm sure theres a hack out there to fix it.

Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background.

This is correct.

Its done, by filling the a element, with a background-color and then applying opaque: 0.5;

The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it.

However, in opera, the right and left padding is correct, but the height padding doesn't work.

Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it?

TIA

Matthew Millar

Let me see if I can explain this correctly:

What I want to do is place all of my pages in a single external file (so that as I add pages, I only have to add that link to one file). Then, place links on each page for "Previous" and "Next". When "Next" is clicked, the next file in the list is linked and likewise with "Previous".

As it stands, the only way I see to use "Previous" and "Next" is to hard code the links in each page. But that will become a pain since my pages are in alphabetical order and I would have to redo dozens (or more) pages each time I add a new page.

Thanks in advance...

im wondering if any1 can help me figure out how i can keep my domain name and link it to my Apache Home Server with a Dyanmic IP

i have tried no-ip.com but i dont like having sitename.no-ip.com
i want sitename.com

does any1 know a way to do this??

I have no idea where to post this question. I want to create a calculator for my website, similar in function to an excel spreadsheet although it doesn't have to look like one. Anyone have any idea how I can go about doing this?

My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions.




Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bg.jpg">
<body>
<div id="wrapper">
<div id="header">
	<div id="topleft"><!--start of content keep left -->
	</div>
    <div id="home">
    </div>
    <div id="about">
    </div>
    <div id="process">
    </div>
    <div id="yachts">
    </div>
    <div id="blog">
    </div>
    <div id="news">
    </div>
    <div id="contact">
    </div>
    <div id="headbanner">
    </div>
</div><!--header -->
<div id="contentwrap">
<div id="leftcontentwrap">
<div id="static">
</div>
<div id="dynamic">
  
</div>


</div><!--leftconentwrap -->
<div id="rightcontentwrap">
<div id="sidebarwrap">
<div id="sidebar">
</div><!--end sidebar -->
<div id="sidedynamic">



</div>
</div><!--sidebarwrap -->
</div>

</div><!--contentwrap -->
<div id="footwrap">
<div id="footer">
</div><!--footer -->
</div><!--footer wrap -->

</div> <!--wrapper -->
</body>
</html>

CSS
Code:

@charset "utf-8";
/* CSS Document */

#header {
	height: 280px;
	width: 891px;
}
#headbanner {
	background-image: url(images/island_12.png);
	height: 203px;
	width: 891px;
	float: left;
}

#home {
	background-image: url(images/island_04.png);
	height: 77px;
	width: 63px;
	float: left;
}
#sidebarwrap {
	float: left;
	height: 348px;
	width: 200px;
}

#dynamic {
	background-image: url(images/island_15.png);
	width: 659px;
	min-height: 427px;
}

#contact {
	background-image: url(images/island_10.png);
	float: left;
	height: 77px;
	width: 140px;
}
#news {
	background-image: url(images/island_09.png);
	float: left;
	height: 77px;
	width: 55px;
}
#footer {
	background-image: url(images/island_16.png);
	height: 75px;
	width: 891px;
	float: left;
}
#sidedynamic {
	background-image: url(images/sidedynamic.jpg);
	float: left;
	height: 77px;
	width: 232px;
	min-height: 77px;
}


#rightcontentwrap {
	height: auto;
	width: auto;
	float: left;
}

#contentwrap {
	width: 891px;
	min-height: 348px;
}
#sidebar {
	background-image: url(images/island_14.png);
	height: 348px;
	width: 232px;
}

#static {
	background-image: url(images/island_13.png);
	float: left;
	height: 152px;
	width: 659px;
}


#process {
	background-image: url(images/island_06.png);
	float: left;
	height: 77px;
	width: 93px;
}
#about {
	background-image: url(images/island_05.png);
	height: 77px;
	width: 67px;
	float: left;
}
#blog {
	background-image: url(images/island_08.png);
	float: left;
	height: 77px;
	width: 61px;
}
#leftcontentwrap {
	width: 659px;
	min-height: 348px;
	float: left;
}


#topleft {
	background-image: url(images/island_03.png);
	height: 77px;
	width: 347px;
	float: left;
}
#yachts {
	background-image: url(images/island_07.png);
	float: left;
	height: 77px;
	width: 65px;
}

#wrapper {
	width: 891px;
	min-height: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 25px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 0px;
}

I also want to be able to make my website more interactive in this way: when I click on one table cell, another cell appears below, which can then be clicked on. Is there a way to do this with CSS and/or HTML, or will I have to resort to Flash?