I would like to know the answer too. Anyone here know what is the answer. I'll do some poking around and get back to you if I discover an useful answer. You should email the people at iContact as they probably could give you an answer..
Or set both div's in 1 div and then set both to 100%. if you don't turn on borders than you would never notice but I suspect you have a background of some kind going to the bottom...
Tried that, Scoutt, but no luck. The div still only stretched the height of the screen, not the document. And no, no background on it. I'd really like to avoid using tables, if at all possible..
Rys..
Then something else is wrong cause that is the way to do it..
Http://www.positioniseverything.net/piefecta-rigid.html.
That works just like you want. so look at what they did. awesome iContact site by the way as it explians the IE hacks and bugs...
Yeah, I, uh... tries that again, and *embarassed cough*.
It works a lot better when you don't have the elements absolutely positioned.....
So anyway, yeah. Thanks, Scoutt..
Rys..
Okay, slight correction. It works in IE. Firefox is still only making the div long enough to contain the text in it. Meanwhile, Opera and Netscape are refusing to render anything at all. Mozilla works exactly like Firefox (most recent versions of all browsers). I'm posting the code below, in the hopes that fresh eyes can see what mine are missing..
Note: I ran it through the W3C validator and all it would tell me is that I have a closing </head> tag when I don't have an open tag, and that I have a <body> tag where one isn't allowed. As near as I can figure, this is because of the XHTML closing on the link tag, but the validator appears to cache pages so I couldn't revalidate and see if it solved the problem..
Rys.
HTML:.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.
<html>.
<head>.
<title> Insert Your Agency's Name Here </title>.
<link rel = "stylesheet".
Type = "text/css".
Href = "main.css" />.
</head>.
<body>.
<div id = "content">.
<div id = "sidebar">.
<div id = "photo"><img src = "sidebargray.gif" /></div>.
<p> </p>.
</div>.
<div id = "main">.
<p> </p>.
</div>.
</div>.
<div id = "image1"></div>.
<table id = "topbar" cellspacing = "0" cellpadding = "0">.
<tr>.
<td id = "image2".
Rowspan = "2"></td>.
<td id = "links"> <a href = "auto.html">auto</a> |.
<a href = "home.html">home</a> </td>.
</tr>.
<tr>.
<td id = "image3"></td>.
</tr>.
</table>.
<div id = "image4"></div>.
<div id = "image5"></div>.
<table id = "bottombar" cellspacing = "0" cellpadding = "0">.
<tr>.
<td id = "image6".
Rowspan = "2"></td>.
<td> </td>.
</tr>.
<tr>.
<td id = "image7">.
</tr>.
</table>.
</body>.
</html>.
CSS:.
Body { padding: 0;.
Margin: 0;.
Overflow: auto;.
Font-family: arial, verdana, helvetica, sans-serif;.
Font-size: 12pt }.
#image1 { position: absolute;.
Top: 0px;.
Left: 0px;.
Width: 100%;.
Height: 2px;.
Background-image: url(Image1.gif);.
Font-size: 1px;.
Z-index: 2 }.
#topbar { position: absolute;.
Top: 2px;.
Left: 0px;.
Border: 0px;.
Padding: 0px;.
Width: 100%;.
Height: 60px;.
Z-index: 2 }.
#image2 { width: 261px;.
Padding: 0px;.
Background: url(Image2.gif) no-repeat }.
#links { height: 36px;.
Background: #6C9BB8;.
Color: #FFFFFF;.
Font-weight: bold;.
Text-align: right;.
Padding: 5px 30px 0px 0px }.
#links a:link { color: #FFFFFF;.
Text-decoration: none }.
#links a:visited { color: #FFFFFF;.
Text-decoration: none }.
#links a:hover { color: #6E0304;.
Text-decoration: none }.
#links a:active { color: #FFFFFF;.
Text-decoration: underline }.
#image3 { background: url(Image3.gif);.
Padding: 0px }.
#image4 { position: absolute;.
Top: 0px;.
Left: 0px;.
Width: 100%;.
Height: 203px;.
Background: #C38B31 url(Image4.jpg) no-repeat;.
Z-index: 0 }.
#image5 { position: absolute;.
Top: 21px;.
Right: 0px;.
Width: 238px;.
Height: 166px;.
Background: url(car2.gif) no-repeat;.
Z-index: 1 }.
#bottombar { position: absolute;.
Top: 151px;.
Left: 0px;.
Border: 0px;.
Padding: 0px;.
Width: 100%;.
Height: 52px;.
Z-index: 2 }.
#image6 { width: 465px;.
Background: url(Image6.gif) no-repeat }.
#image7 { height: 13px;.
Background: url(Image7.gif) }.
#content { position: absolute;.
Top: 203px;.
Width: 100% }.
#content p { padding-right: 1em }.
#main { width: 100%;.
Height: 100%;.
Margin-left: 0.5em }.
#sidebar { float: right;.
Width: 155px;.
Height: 100%;.
Padding: 0px;.
Background: #EEEEEE }.
#sidebar p { padding: 0px 3px 0px 3px }.
#photo { background: url(family.jpg) no-repeat -85px 64px;.
Width: 100%;.
Padding: 0px;.
Margin: 0px }.
#photo img { width: 100% }.
H1 { color: #6C9BB8;.
Font-size: 18pt;.
Font-weight: bold }.
A:link { color: #6C9BB8;.
Text-decoration: none;.
Font-weight: bold }.
A:visited { color: #B4BDDA }.
A:hover { color: #B4BDDA }.
A:active { color: #6E0304 }..
Yeah if you are using html 4.01 transistional you can't use the closing like xhtml..
<link rel = "stylesheet".
Type = "text/css".
Href = "main.css".
/.
>.
That is what it's talking about. the validator doesn't cache either, you have to revalidate. they have a button to do so..
Why are you absolutly positioning the content id when you don't need to? if you make it follow the table it will be come right after the table and you don't have to position it at all. but if you give that ID a height of 100% it will go all the way down...
The header stuff had to be absolutely positioned. This means the content div has to be absolutely positioned, or it will align to the top of the page, not the bottom of the now-out-of-flow table. I tried not positioning it and setting a 203px top margin instead, but that wrought havoc on the sidebar..
Specifically, in Firefox:.
With the margin, the sidebar div now only extends for one screen height. The text overflows out of the div and continues on down the page. The #main div, having detected the end of the floating div, proceeds to write it's text all the way to the right margin, creating a space where text from both divs is overlapping and jumbling together. I suppose I could assign a 160px or so right margin to #main, but that wouldn't solve the problem of the grey not continuing to the bottom of the page, leaving me in the same place I was before. It continued to look as it's supposed to look in IE..
So, yeah. Craziness. Should've just gone with a set width. Grumble..
Rys..
If you don't absolutly position your table you won't have any problem. once you position a table it make sit do funny things. a tabel is considered a block element but it really doesn't act like it. make it go at top with relative or no position and do the div containers right after it the same. no margins or positioning. I tested the code on my machine and it worked just like normal.
But I don't have the image or text in it..
Do you have a page we can see it in action?..
The tables are absolutely positioned because they actually overlap images 4 and 5 to mask off parts of them. I'll give relative positioning a try tomorrow when I get back into work. I'll also post a screenshot at that point so you can have some vague clue what I'm actually talking about. It's a bit difficult to picture..
Rys..
As promised, screen shot (sorry if it comes out a tad large, the only imaging editing software I'm allowed is Paint):..
Ahh I see. you are almost better of making thw whole top part a graphic like it is now. then cut it up in slices and make it relative. it would seem less of a heacdache to me...
It would, indeed, be much less of a headache. But then it wouldn't stretch properly to various screen sizes and clients would be able neither to swap out the orange images with something else or to insert their logos into the banner. Well, they could insert their logos, I guess, but they couldn't do the swapping..
This is actually a template iContact site that our independent agents will be able to download and customize to suit their individual agencies, so it needs to be flexible (literally and metaphorically)..
And, admittedly, the challenge of it appeals to me..
Rys..