HTML - How To Make A Div Stretch To The Full Height Of A Container

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.

What code do I need to place some text in some type of table or container?

thanks

G'day guys,

I've got a navigation DIV and a content div on the page, is there a way to make the nav DIV always the same height as the content DIV regardless of the amount of data I put in the content DIV?

Thanks for any help guys, it's very much appreciated.

Cheers,
Jamie

Hello.
I have a flash header on my page with links. When each link is pressed, the appropriate .html page is loaded into the iframe, which i have defined with this code:

Code:

<iframe name = "mainframe" src="home.html"
width="746" height="800"
frameborder="0"
align="middle">

The problem is, the different pages that will be loaded into 'mainframe' have different heights, and i would like the iframe to adjust to these heights without adding scrolling bars.

How would I do this?

I'm trying to get into the grip of using CSS and what not. I know, I'm so way behind....

anyway, I have a master page and the first header content will have an image.
I want the image to be indented about 20% in from the left, and I have done this using the css padding-left. That's cool

The next concern is the image itself. is there a way for it to maintain some what the quality even when stretching it? So I have an img tag, and given it a fixed width and height for an image. of course, looks odd but I am trying to get some nice images in the header at random when loadtime.

so.... is there a way to maintain the quality perhaps? Or maybe I am doing this all wrong?

Hi
Don't know if this is the correct forum, but I will add it here.
I am doing a new site, and trying my best to get it working in IE6.
Everything is going OK with the set up so far.
However, I have to use PNGs for a drop shadow. (if anyone knows a better way, btw, that works in IE6, please tell me :-) )
Anyway, all the positions, etc are correct and they become transparent. The issue is they seem to be getting a larger vertical size than they should have.
You can see this on the top corner shadow, as it overlaps the one below.
Test Page
Is there a cure for this?
Can anyone help?

Thanks in advance

Hello, I just sliced a website template and i was wondering how i get it so the images stretch all the way across the screen instead of it showing the background. http://www.legouniverseforums.com/blowupreviews.html here is the link to it if you would like to edit my code that would be great. All help appreciated.

im trying to stretch a image for the top of my page here is a code i saw on another page that was working but i cant get it to work for me and i cut / paste it, so i cant figure this out... heres the code i used... im confused why its a background = when its only the top background on his page... i just wanted this to be the top banner of my page and have it stretch acording to the viewers screen size, any help would be great...



<tr class=td2><td class=td2;align="center" colspan="2">


<table border="0" cellspacing="1" width="100%">
<tr>
<td width="100%" background="banner-top.JPG">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bordercolor="#FFFFFF">
<tr>
<td width="100%" background="banner-top.JPG" height="80">
<p align="center"><font color="#FFFFFF" size="3" face="Arial"><b>



</b></font></td>
<font></td>

Hi,

I have a fixed width and height images

<img width="200" height="300" src ... />

and several images of different size. How can I avoid to stretch the images and just crop them ?

thanks

Hi, I'm making a website template, and I'm about finished. I'm having trouble though, I want the table on the bottom right, the "MAIN" table with content saying "MAIN" to stretch 100% so even if the typing doesn't reach the end of the table, it will still stretch, and I have no Idea what wrong. Any help would be appreciated.

the full code is attachted

Hi guys,
Ok, i have dreamweaver 4, yes i know its and old version but it works for me. The question i have is proberly a simple solution for you guys but its been giving me a headache for ages.
i want to create a webpage that will auto stretch to meet the users screen size when viewed from the web. Now i beleive its somthing to do with putting % in a table instead of numbers for the size?
Ok, that bit i get, so let me ask in a little more detail. when i open dreamweaver 4 up, the 1st thing i do is create the main area for my content, in dreamweaver 4 this is defined by showing a green bordered box... Now is it this box area that i make sure to put the % figures in before i continue to then add more areas for content inside the main box so that the webpage when finished will auto stretch to any screen?
Or do i have to % all the other areas i create withing the main webpage area too?

regards

Gary

Hi guys,

It's my first time on these forums, and I thought you all would be the best help I could get for my HTML problem.

I've just recently created a blog and I am currently using a custom template.
I'm not too familiar with HTML, or any sort of coding really, and I would like to stretch the content area of the template so that I could place larger images without it overlapping the grey bars.

I have no idea what values to change though or what I should be looking for. Could you guys help me out?

Many thanks,
AciesEdge

I made some slices in photoshop to manage the links from Front Page but the links look like this.Check the photo... any one knows what shall i do ?

I'm making a small little template for just messing around matching colours, and i've tried putting a vertical navigation bar on the left.
I have the div with a <ul> inside of it, but it's not taking up the full width of the div. It's taking up 75% of the div.

Does anybody have any answers for it happening? I have posted my code below.

HTML 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" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color: 	#6698FF;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;
}
</style>
</head>

<body>
<div id="wrap">

	<div id="container">
    	<div id="header"></div>
        <div id="sidebar1">
        <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Link two</a></li>
          <li><a href="#">Link three</a></li>
          <li><a href="#">Link four</a></li>
        </ul>
        </div>
        <div id="content">dfgfdgdfg</div>
        <div id="sidebar2">sgdsgdfg</div>
    </div>

</div>
</body>
</html>

HTML Code:

#wrap {
	width: 1050px;
	margin: 0px auto;
	}
	
ul.nav {
	list-style: none;
	border-top: 1px solid #666;
}
ul.nav li {
	border-bottom: 1px solid #666;
}

ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	text-decoration: none;
	background: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background: #6F7D94;
	color: #FFF;
}
	
#container{
	width:800px;
	min-height:700px;
	margin-left:auto;
	margin-right:auto;
	background-color:#5CB3FF;
	}
	
#header{
	
	}
	
#sidebar1{
	width:20%;
	float:left;
	background-color:#A0CFEC;
	}
	
#content{
	width:60%;
	float:left;
	background-color:#FFFFFF;
	}
	
#sidebar2{
	width:20%;
	float:left;
	background-color:#A0CFEC;
	}

I need to create a link that will bring up a page that shows nothing but the <body> of the page, with no menu bars, status bars etc. I have an old page created with FrontPage years ago that does it perfectly, nothing from the browser shows at all, not menu, status scroll, etc shows. However, on my new fancy Joomla 1.5.10 site I cannot get it to work... even with the same code pasted in from the old site.

I cannot get it not to display the menu and status bars when I try it on my Joomla site..

This is the code from the old site:

<a href="BlackPage.htm">
<img border="0" src="luscher%20black%202.jpg" lowsrc="luscher%20black%202.jpg" width="100" height="71"></a>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


It even has a bunch of garbage in it and it works perfectly. Why can't I get the same thing to work on my Joomla site?

Thanks Larry