Jump to content

Vertical-Align Content with Unknown Height


jacenta

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  :'(
Link to comment
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.
Link to comment
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
Link to comment
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.
Link to comment
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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.