Three columns (fixed-fluid-fixed) not working in Firefox [Archive]

Sciamano72

03-13-2013, 09:37 PM

Hi!
I've copied the three columns fixed-fluid-fixed found on this site here (http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/).
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):


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

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

itivae

03-14-2013, 12:02 AM

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.

.myclass {
min-height: 600px;
}

Or something like that. Good luck.

Sciamano72

03-14-2013, 01:38 PM

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.

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

Sciamano72

03-14-2013, 02:55 PM

I've found a solution.
Adding:

height:100%;

to the .innertube class works. :)