Results 1 to 4 of 4

Thread: Three columns (fixed-fluid-fixed) not working in Firefox

  1. #1
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Three columns (fixed-fluid-fixed) not working in Firefox

    Hi!
    I've copied the three columns fixed-fluid-fixed found on this site here.
    It's working perfectly in Chrome, but not so good in IE and Firefox (this last one being the most problematic).

    Here is the code I used (note that I can't use external CSS, so I embedded it in the page file):

    Code:
    <!--Force IE6 into quirks mode with this comment tag-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Americhiamo - Istruzioni per gli USA</title>
    <style type="text/css">
    
    html, body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #left, #right{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 150px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: #024065;
    color: white;
    }
    
    #right{
    left: auto;
    right: 0; 
    width: 150px; /*Width of right frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: #024065;
    color: white;
    }
    
    #maincontent{
    position: fixed; 
    top: 0;
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 150px; /*Set right value to WidthOfRightFrameDiv*/
    bottom: 0;
    overflow: auto; 
    background: #fff;
    }
    
    .innertube{
    margin: 0px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }
    
    * html body{ /*IE6 hack*/
    padding: 0 150px 0 150px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
    }
    
    * html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="left">
    <div class="innertube">
    
    <iframe width="150" height="100%" src='http://www.americhiamo.it/banners2.html' seamless></iframe>
    
    </div>
    </div>
    
    <div id="right">
    <div class="innertube">
    
    <iframe width="150" height="100%" src='http://www.americhiamo.it/banners.html' seamless></iframe>
    
    </div>
    </div>
    
    
    <div id="maincontent">
    <div class="innertube">
    
    		<iframe width="100%" height="100%" src='http://www.americhiamo.it/index.php' seamless></iframe>
    
    </div>
    </div>
    
    
    </body>
    </html>
    But in Firefox the page won't extend for the whole height and this is what shows up:

    Click image for larger version. 

Name:	firefox.jpg 
Views:	162 
Size:	19.4 KB 
ID:	4979

    I can't seem to find where the problem stands. Any help??
    I suspect the problem lays in the "height=100%" parameter in the iframe code, but I wouldn't know how to achieve this differently.
    Thanks!!

  2. #2
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    You could try to define a min-height of a px number. As I understand it height does not work well with percentages. I may be wrong but this is how I have always accomplished this.

    i.e.

    Code:
    .myclass {
    min-height: 600px;
    }
    Or something like that. Good luck.

  3. #3
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by itivae View Post
    You could try to define a min-height of a px number. As I understand it height does not work well with percentages. I may be wrong but this is how I have always accomplished this.

    i.e.

    Code:
    .myclass {
    min-height: 600px;
    }
    Or something like that. Good luck.
    Thanks for the suggestion.
    I can't test it right now (I will be able to only later), but I guess this solution will show only a portion of the page when someone is using a vertical resolution higher than 600px (or any other value entered). Am I right?

  4. #4
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've found a solution.
    Adding:

    Code:
    height:100%;
    to the .innertube class works.

Similar Threads

  1. CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)
    By icoombs in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-17-2009, 11:25 AM
  2. three column layout #3.6- (fluid-fixed-fluid)
    By fifi in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-20-2008, 10:56 AM
  3. 3 columns layout - fixed fluid fixed
    By perry in forum CSS
    Replies: 2
    Last Post: 03-15-2007, 03:25 PM
  4. Replies: 1
    Last Post: 02-18-2007, 09:15 AM
  5. Replies: 4
    Last Post: 11-09-2006, 12:32 PM

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
  •