SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Align a DIV with dynamic height inside another DIVů

    I have been looking around and seem to find lots about aligning a div vertically however not with a dynamic height div surrounding it.. i have a moch up of what i require, built from all sorts of different templates i have found.. i just cant get it to do what I want maybey i am totally wrong?.. i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..

    I have checked out "vertically-center-content-with-css" at vdotmedia and this is exactly what i need the div to do however i can't get it working in the template i have come up with.. i do want it to be cross browser and ie6 would be nice but at least ie7.. I know there are lots of sites regarding auto div alignment such as http://stylizedweb.com/2008/02/01/vertical-align-div/ however i think what i need is slightly different.. or i just dont know what i am doing...

    Thanks in advanced!
    The CSS
    Code:
    * {margin:0;padding:0;}
    
    html,body {height:100%;padding:0} 
    
    html {overflow-y:scroll;}/*keep scrollbar position present in FF*/
    
    body {	
        background:#FFFFFF;
        background-attachment:fixed;
        font-size: 100%;
        font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
        color: #000;
    }
    #wrapper {
        margin:0 auto;
        width:900px;
        min-height:100%;
        background:#FFFFFF; /*important for good browsers since min-height:100%; is on this div*/
        border-left: 0;
        border-right: 10;  
    }
    #header {
        width:100%;
        height:110px; 
        position:fixed;
        top:0;
        left:0;
        z-index:5;
    }
    #innerhead {
        height:110px;
        border-bottom: 0;
        background:#666666;
    	color: #FFF;
    }
    #innerwrap {/*IE6 gets it's own styling for this*/}
    
    #main{
        margin:0 auto;
        width:900px;
        background:#FFFFFF;/*this is here to be picked up by IE6*/
        position:relative; /*establish containing block for AP #rightwrap*/
    }
    .top-pad {height:110px}/* same height as header to preserve space*/
    
    #content {
        width:698px; /*actual space available is 699px, let's keep it an even number*/
    	margin-left:200px;
    	text-align:center;
        padding-bottom:20px; /*give bottom padding for textual content*/
        background:inherit; /*inherhit #main BG color for 100% height appearance with minimal content*/
        line-height:1.2;
    }
    
    #right-wrap {
    	width:200px;
    	border-left: 0; /*201px total width with left border*/
    	position:absolute;
    	top:110px; /*same as header height*/
    	bottom:130px; /*same as footer height*/
    	right:700px;
    	background:#BCC5E1;
    }
    #right-inner {
        position:fixed;/*for good browsers*/
        width:200px;
        top:110px; /*same as header height*/
        bottom:130px; /*same as footer height*/ 
        padding-bottom:20px; /*give bottom padding for textual content*/
    	padding-left: 5px;
        background:#BCC5E1; 
        overflow:auto; /*give insurance for text acessability at smaller viewport heights*/
    }
    .bot-pad {height:110px}/* same height as footer to preserve space*/
    
    #footer {
        width:100%;
        height:130px; 
        position:fixed;
    	    bottom:0;
        left:0;
        z-index:5;
    }
    #innerfoot {
        height:129px;
        border-top: 0;
    	background:#666666;
    	color: #FFFFFF;
    }
    The HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>Cross Browser "Fixed Header-Footer-Sidebar" ( IE6-JQuery )</title>
       <link rel="stylesheet" type="text/css" href="style.css" media="screen">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    </head>
    <body><!--root element for modern browsers-->  
    <div id="wrapper"><!--root element for IE6-->  
        
        <div id="header">
    
            <div id="innerhead">Header Fixed</div>
        </div>
    
    <div id="innerwrap">
        <div id="main"> 
        <div class="top-pad"></div><!--preserve the header space-->
            <div id="right-wrap">
                <div id="right-inner">
                    <h3>Fixed Sidebar</h3>
    
                    <p>Need this auto center to match the right content</p>
                </div>
            </div><!--end right-wrap-->          
      <div id="content">
      <p> Main Need This to auto Center Vertically</p>
      </div>
      <!--end content-->        
        <div class="bot-pad"></div><!--preserve the footer space-->
    
        </div><!--end main-->
    </div><!--end innerwrap-->
    
    <div id="footer">
        <div id="innerfoot">Footer Fixed</div>
    </div>
    
    </div><!--end wrapper-->
    
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" media="screen">
    <script type="text/javascript">
       $(function(){                       // run all of this on document.ready (document.ready is jQuery talk)
       
          var resizing = false;
       
          init();                          // run the init function
          
          $(window).resize(function(){     // bind a resize event to window
             init();                       // run the init function on window resize
    		 window.location.reload()      // reload the window after init() runs
          });
          
          function init(){   
    	  
             if(!resizing){
    		    resizing=true;
                window.setTimeout(function(){    // all code in a setTimeout will run after the set # of milliseconds passes as set below
                   var viewPortHeight = $(window).height(); // set viewport height to a variable
                      
                   var headerHeight = $("#header").css("height"); // set header height to a variable
                   headerHeight = headerHeight.replace(/px/,'');  // remove the 'px' from the previous variable so we can preform Math with it
                   var footerHeight = $("#footer").css("height");
                   footerHeight = footerHeight.replace(/px/,'');
                
                   var headerFooterHeight = parseFloat(headerHeight) + parseFloat(footerHeight); // add header and footer height
                
                   var elHeight = viewPortHeight - headerFooterHeight; // subtract that value from viewPortHeight
                   elHeight = (elHeight - 17) + "px"; // elHeight is how high the fixed element will be, add the 'px' back on
                
                   $("#right-inner").css('height',elHeight); // set the fixed elements height
                   			
                   $("#innerwrap").scroll(function () { // bind a scroll event to #innerwrap
                      var scrollY = $("#innerwrap").scrollTop(); // scrollY will equal the amount #innerwrap has scrolled each time it scrolls
    				  $("#right-inner").css('top',scrollY); // set #right-inner top property
                      $("#right-inner").css({ 'overflow-y' : 'auto', 'overflow-x' : 'hidden' });
                   });
                   resizing = false;
                },50); // setTimeout will run in 50 milliseconds
             }
    	  }  
       });
    </script>
    <![endif]-->
    </body>
    </html>
    Here is a link for what i have and describes what i am trying to do.. I hope its simple... http://www.mmageardirect.com.au/tmp/index.htm

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..
    This is something CSS does not do well. It is hard, and not simple.

    Some ideas that come to me:
    Display: table
    Since you can't use the offset positioning (because you do not know the height of the content either), you might be stuck using display: table. The problems with that:
    you'll need a "row" element to contain right and sidebar elements... though possibly #main could be this row element. #innerwrap would have to be the display: table element. Not sure what top-pad is doing since right wrap's already starting below the header and #content could just have top-padding that slides under #header anyway (same with footerpad)... so then right-wrap and content are the two children and are display: table-cell. They can vertically align a single block child (multiple, not sure).

    Problem is IE6 and 7 though. You might be able to get away with a close-enough set of padding and heights to make the content and right wrap look "close" on "most" resolutions/screen sizes.

    A real table
    Possibly the other solution is a real HTML table, which naturally has display: table on it (also in IE). The table would have to be markup-simple (bare minimum) and would only be replacing innerwrap and all children. Top and bottom margin on the table would replace the padding divs. If this table takes place of innerwrap then it is still a direct child of the body element, who you've set to 100% along with html element, so (I've never tried this) you might be able to get away with setting a % height on the table.

    This would change your source order: content would come before the "right" sidebar. A known disadvantage of layout tables. And you'd have to keep the markup very simple to avoid accessibility issues (two columns, one row, two table data cells (rightwrap and content)) with everything else remaining non-table markup.

    If it weren't for IE6/7 I wouldn't consider using a table for layout, though then again this is a designer setup (whatever's in the header and footer had better be soooo important that I absolutely can't stand to free up my screen real estate and wait til I scroll to see them!) and is already a little bit overdone (though the only thing that's actually bad about it I think are the padding divs, unless there's a browser bug I don't know about preventing padding on #content from doing their work).

    Scripting
    Least favourite, but I have seen people do this. Javascript can calculate browser window height and width and then can change element sizing directly. Means the page may be broken without JS, so you'd still be building it at least the way you've got it now so that it's still usable (just not vertically centered).


Tags for this Thread

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
  •