Vertical-Align Content with Unknown Height

jacenta · #1 07-18-2006, 07:28 PM

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>

- Jacenta

jscheuer1 · #2 07-20-2006, 06:54 AM

If you know the height of the content, you can use:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Otherwise, javascript probably is required although in IE the expression style can be used. This requires javascript but is smoother rendering than an onload script would be. All other browsers would require an onload script. The disadvantages are:

1 ) Javascript is required but, you can always just have the content aligned to the top of the page for non-javascript enabled browsers.

2 ) In all but IE, the page must load first, causing the content to jump to center after loading. Not a big deal but, really bothers some people, mostly just designers.

jacenta · #3 07-20-2006, 08:25 PM

I'm not that good with javascript... so I would have to find one somewhere. I have been looking everywhere but still no luck.

I ended up doing it this way from an idea from someone else on another site. I already put my content in so this is what I have: http://www.tri-m.com/test.html

The bad part though about this design is that it has to be rendered in quirks mode... I couldnt find a way to do it with another doctype... SOO because of this other things don't work. I'm not too concerned about some of the minor problems but the one problem that does concern me that I have to fix is the lists.

The bullets in the list work fine in FF but in IE (DAMN IE!), the bullets vertically align to be in the middle instead of at the top. I've been trying everything and it just won't work for me. :S

Geez there's always some other problem when another problem is fixed. lol

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search