Jump to content

Archived

This topic is now archived and is closed to further replies.

jacenta

Vertical-Align Content with Unknown Height

Recommended Posts

Hey,
I have been looking EVERYWHERE for a solution and there seems to be none just quite yet.
I've searched google and all sorts of help forums... and still zip, nothing.

What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this.

I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated.
Thank you sooo much to everyone that tries this out.

Once again here is the Example: http://www.tri-m.com/test.html

Here is my code:
[code] 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tri-M Systems INC.</title>

<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>

</head>
<body>
<div id="container-page">
  <div id="container-head">
    <div id="header">
    </div><!-- END "header" -->
  </div><!-- END "container-head" -->
  <div id="container-content">
<center>
    <div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
    </center>
  </div><!-- END "container-content" -->
  <div id="container-foot">
    <div id="foot">
    </div><!-- END "foot" -->
  </div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
[/code]

- Jacenta  :'(

Share this post


Link to post
Share on other sites
As far as I know? It should work with just the vertical-align attribute. But of course, it's never that easy, is it? And it isn't in this case either. As far as I know, (and I'll have to look this up to be sure) vertical-align: middle; doesn't work in IE, and from what I've seen, no other browsers. I'd love to be proven wrong on this though.

Share this post


Link to post
Share on other sites
Exactly.... vertical-align is not supported in IE and for this... it cannot even work for FF because there is no exact specified height... soooo I am STUCK.

I have tried tables... but than agian when I put height:100%... in IE... the white space becomes the actual 100% of the browser instead of the user's view point and in FF... the 100% does nothing.

I have also tried line-height and display:table-cell solutions.. and still none. :S

SOOO frusterating! :(
- Jacenta

Share this post


Link to post
Share on other sites
Height and CSS are not very friendly, and I think your task is almost impossible using divs but I am not sure.

You can use some javascript to postion the box div when the page load, something like this will work
[code]
<script language="javascript">
function process_box(align){
var white_height = document.body.scrollHeight - document.getElementById('container-foot').scrollHeight - document.getElementById('container-head').scrollHeight;

if (align=='middle') var h = parseInt((white_height/2) - (document.getElementById('box').scrollHeight / 2));
else if (align=='bottom') var h = white_height - document.getElementById('box').scrollHeight;
else h = -1;

if (h > 0) document.getElementById('box').style.marginTop = h+"px";
}

window.onload=process_box('middle');
</script>
[/code]

You can change the 'middle' to bottom if you want to align the box to the bottom.

Share this post


Link to post
Share on other sites
Hey!
Thanks for your help. :)

I ended up putting all my content into the test.html that I showed you and this is what I have come up with:
http://www.tri-m.com/index_footer_new.html. I can't seem to get the javascript to work though.
Do you know what I am doing wrong?

I even tried it in the simple http://www.tri-m.com/test.html and it won't work. :S
If this javascript does do the job that would be AWSOME!!!! :D
- Jacenta

Share this post


Link to post
Share on other sites
just take this line out
[code]
window.onload=process_box('middle');
[/code]
and add the function to the body onload event
[code]
<body onload="swap(); process_box('middle');">
[/code]
and it should work.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.