View Full Version : Question about vertical align for divs

cement hands
10-24-2007, 05:07 PM
Hi all...

Do you have to specify a height size in pixels to employ vertical centering on a div?

I am using height:100% and then padding-top:12% for my outer container. On some screens, this results in a vertically centered inner container, which is the intended result. On other screens, however, you have to scroll down a bit--the inner div is not vertically centered.

any help would be greatly appreciated. thank-you!

the page is at: http://blast.ca/fireworks-displays.html

the code i have used is below:
* note: the outer div is called "shell"; the inner div is called "container" *

<style type="text/css">
body { background-color: #000; }
div { clear:left; margin:0 35px 0 0; }
p { background-image: url("/images/black.gif"); text-align:justify; font:normal 12px arial; color:#ffffcc; line-height:1.3; margin-right:30px; }
h1 { text-align:center;color:#99cc00; font: bold 22px arial; padding-top:8px; margin-right:10px; }
#shell { width:100%; height:100%; padding-top:12%; }
#container { background-image: url("/images/bg_body_wide.gif"); width:650px; margin:0 auto; text-align:center; padding:15px; border: ridge 2px #666; }
.sandbag { float:left; line-height:1px; font-size:1px }
.yel { color:#fffc00; background-color:#3390000; }
.red { font-weight:bold; color:#f60; background-color:#339000; }



<!-- outer shell begins -->
<div id="shell">

<!-- inner container begins -->
<div id="container">

<!-- sandbag divs begin -->
<div class="sandbag" style="width:200px;height:45px">
<img src="/images/fireworks-19.jpg" width="200" height="45" alt="" />

etc. etc.
<!-- sandbag divs end -->

<!-- text begins -->
<h1><span style="background-color:#000;opacity:.70">Professional Fireworks Displays</span></h1>
... lots of text
<!-- text ends -->

<!-- inner bordered container ends -->

<!-- outer shell ends -->