Jump to content


Photo

Vertical-Align Content with Unknown Height


  • Please log in to reply
6 replies to this topic

#1 jacenta

jacenta
  • New Members
  • Pip
  • Newbie
  • 4 posts

Posted 18 July 2006 - 05:40 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:
  
 <!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  :'(

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 18 July 2006 - 06:10 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 jacenta

jacenta
  • New Members
  • Pip
  • Newbie
  • 4 posts

Posted 18 July 2006 - 07:18 PM

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

#4 jacenta

jacenta
  • New Members
  • Pip
  • Newbie
  • 4 posts

Posted 19 July 2006 - 10:07 PM

Does anyone else have any ideas?

#5 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 20 July 2006 - 12:31 AM

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
<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>

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

NoGray.com


#6 jacenta

jacenta
  • New Members
  • Pip
  • Newbie
  • 4 posts

Posted 21 July 2006 - 03:58 PM

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...ooter_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

#7 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 21 July 2006 - 04:50 PM

just take this line out
window.onload=process_box('middle');
and add the function to the body onload event
<body onload="swap(); process_box('middle');">
and it should work.

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users