Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Thanked 0 Times in 0 Posts

    Question about vertical align for divs

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


    Last edited by cement hands; 10-25-2007 at 05:14 AM.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts