SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can not create element that fills the view port vertically

    I have gone through Paul's thread - http://www.sitepoint.com/forums/show...41&postcount=8 and attempted to create something very much like it and I am failing miserably.

    What I want is - without any content on the screen is to have a white column down the middle of the screen, from top to bottom.

    Here is what I have:

    html
    HTML Code:
    <html><body>
    
    <div id="outer_wrap"></div><!--End outer_wrap-->
    </body>
    </html>
    And the css
    Code CSS:
    html,body {
    	margin:0px;
    	padding:0px;
    	}
     
    body {
    	background-color:#d9e5f5;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	}
     
     
    #outer_wrap {
        /*background-color:#cccccc;*/
    min-height:100%;
    	background-image:url(/images/sitewide/page_filler.gif);
    	background-position:center top;
    	background-repeat:repeat-y;
        margin:0px auto;
        width:835px;
     
        }

    Any help would be appreciated. One difference that I have noticed is that my footer will reside inside the outer_wrap and is only pushed to the end of the content not the bottom of the viewport.

    Dan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Dan,

    You need something to base the height on and something for IE6.

    e.g. This:
    Code:
    html,body{height:100&#37;}
    * html #outer_wrap{height:100%}

  3. #3
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks. I think what I was doing is using the height:100&#37; in only one place, not both.

    Thanks for clearing this up for me,

    Dan


Bookmarks

Posting Permissions

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