Hi Folks,
I have a need to horizontally center a div on a page regardless of parentage. That is, wherever this bit of markup gets generated, inside another div, an ol, whatever, to the absolute center of the page it must go. I’m halfway there; as long as the markup is directly inside the body of my page, all is well. Inside other containers however, I just can’t seem to make it work. Here is the work in progress:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<style type="text/css">
h1.Warning { color: red; padding-bottom: 0px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px;}
h1.Caution { color: black; padding-bottom: 0px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px;}
h1.Note { color: blue; padding-bottom: 0px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px;}
table.Warning { border: dashed red 4px; padding-right: 2px; padding-left: 2px;}
table.Caution { background: yellow; border: dashed black 4px; padding-right: 2px; padding-left: 2px;}
table.Note { border: solid black 4px; padding-right: 2px padding-left: 2px;}
.ncw-container { position: relative;
width: 100%;
min-width: 100px;
}
.ncw-center { position: absolute;
width: 50%;
top: 0px;
left: 50%;
height: 0px;
}
.ncw-table { position: relative;
display: inline-block;
left: -50%;
}
</style>
<script language="javascript">
function centerWCN()
{
var containerDivs = document.getElementsByTagName("div");
for (var i = 0; i < containerDivs.length; i++)
{
var containerDiv = containerDivs[i];
if (containerDiv.className == "ncw-container")
{
var tables = containerDiv.getElementsByTagName("table");
var tableHeight = 0;
for (var j = 0; j < tables.length; j++)
{
var table = tables[j];
if (table.className == "ncw-table")
{
tableHeight = tableHeight + table.clientHeight;
}
}
containerDiv.style.height = tableHeight + 'px';
}
}
}
function OnResize()
{
centerWCN();
}
</script>
</head>
<body OnResize="OnResize()">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<div class="ncw-container">
<div class="ncw-center">
<table class="ncw-table">
<tr>
<td align="center" valign="top">
<table width="10*%" class="Warning">
<tr>
<td align="center" valign="top">
<h1 class="Warning">WARNING</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ncw">
<p class="ncw" id="">Lorem ipsum dolor sit amet</p>
</td>
</tr>
<tr>
<td class="ncw">
<p class="ncw" id="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit.</p>
</td>
</tr>
</table>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
</body>
</html>
A few requirements:
- Individual lines must not be centered, thus the centering of a table, rather than just using naked p elements or somesuch.
- The Warning, Caution, Note banners should not get stretched, so they have their own container.
- Production environment is IE7 / CSS2.
I saw a few solutions on various forums where folks proposed inverting the absolute div to the outside or used two absolute divs, however, this only seems to work in cases where you are willing to set fixed dimensions on the divs. I can’t do that. The Warning, Caution and Note text must flow up to the width of the page. I’ve also tried dynamically setting the height of one or both absolute divs in the javascript, but this seems to get ignored and the text just bleeds onto the next paragraph.
I’d love to ditch the javascript, but once in the realm of absolute-ism, I couldn’t see a way around it.
Thanks,
Eric