SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF centre aligning Div

    Hi,

    I have been using some example code I found in a tutorial to produce a header, centre content and footer, whereby the header and footer stay at the top and bottom all the time and central content is scrollable. It works exactly how I want it to work in IE but I cannot get the page layout to centre in FireFox.

    Here is the HTML:

    HTML Code:
    <div id="framecontentTop">
     <div class="innertube">
      Header
     </div>
    </div>
    <div id="framecontentBottom">
     <div class="innertube">
      <h3>THIS SECTION OF THE SITE NEVER RELAODS</h3>
     </div>
    </div>
    <div id="maincontent">
     <div class="innertube">
      <!--AJAX CONTENT-->
      <div id="rightcolumn"><h3>Choose a page to load.</h3></div>
      <div style="clear: left; margin-bottom: 1em"></div>
     </div>
    </div>
     
    And here is the CSS:

    HTML Code:
    body{
     margin: 0;
     padding: 0;
     border: 0;
     overflow: hidden;
     height: 100%; 
     max-height: 100%; 
     background-image: url("../images/bg.gif");
     background-repeat: repeat;
    }
    #framecontentTop, #framecontentBottom{
     position: absolute; 
     top: 0; 
     left: auto; 
     right:auto;
     width: 760px; 
     /*Height of top frame div*/
     height: 125px; 
     /*Disable scrollbars. Set to "scroll" to enable*/
     overflow: hidden;
     border:1px solid black;
    }
    #framecontentBottom{
     top: auto;
     bottom: 0; 
     /*Height of bottom frame div*/
     height: 110px; 
     /*Disable scrollbars. Set to "scroll" to enable*/
     overflow: hidden; 
     background-color:#ffffff;
     border:1px solid black;
    }
    #maincontent{
     position: fixed; 
     /*Set top value to HeightOfTopFrameDiv*/
     top: 125px; 
     left: 0;
     right: 0;
     /*Set bottom value to HeightOfBottomFrameDiv*/
     bottom: 110px;
     overflow: auto; 
     background: #fff;
     width:700px;
     border:1px solid black;
    }
    .innertube{
    }
    * html body{ 
     /*IE6 hack*/
     /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
     padding: 130px 0 110px 0; 
     text-align:center;
    }
    * html #maincontent{ 
     /*IE6 hack*/
     height: 100%; 
     width: 760px;   
    }
    I would really appreciate it if someone could take a look because i'm baffled as to why it won't centre align in FireFox.

    Thanks,

  2. #2
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks this is brilliant. Only problem is though I can't seem to get it to work correctly on the Mac Safari software. It works fine on the IE version of Safari but not the Mac version.

    I've modified your code sligtly to fit my requirements:

    HTML

    HTML Code:
    <div class="header">
    
    </div>
    <div class="wrapper">
      <div class="flashBanner">
       
       </div>
      <div id="rightcolumn">   
       <div class="bodyText"></div>
      </div>
    <div class="footer">
     
    </div>
    And here is the CSS:

    HTML Code:
    *{
     padding:0;
     margin:0;
    }
     
    body{
     height:100%;
     font-size:75%;
     background-image: url("../images/bg.gif");
    }
     
    div{
     font-size:1em;
    }
    .header,.footer,.wrapper{
     width:64em;
    }
     
    .header{
     position:absolute;
     left:50%;
     margin-left:-32em;
     height:110px;
    }
    .footer{
     position:absolute;
     left:50%;
     margin-left:-32em;
     height:75px;
    }
    .header{
     top:0;
    }
    h1{
     font-family:Tahoma;
     font-weight:normal;
     font-size:16px;
     margin-left:5px;
    }
    .footer{
     bottom:0;
    }
    .wrapper{
     overflow-y: auto;
     overflow-x:hidden;
     background:#FFFFFF;
     margin-top:50px;
     width:717px;
    }
    head+body .wrapper{
     position:absolute;
     left:50%;
     top:5em;
     bottom:60px;
     /*margin-left:-30.5em;*/
     margin-left:-361px;
    }
    .flashBanner{
     border:1px solid #CCCCCC;
     width:715px;
     height:325px;
    }
    .bodyText{
     background-color:#FFFFFF;
     width:715px;
     /*border:1px solid #CCCCCC;*/
     margin-top:10px;
     font-family:verdana;
     font-size:11px;
    }
    .bodyText P{
     padding:5px;
    }
     


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
  •