chowderman
09-02-2010, 10:21 AM
Hi,
I love the Left and Top Frames layout but I'd like the top to stretch across the width and the left to take what remains of the height.
It seems simple to swap lines in the CSS to make it happen, but can I get it to work, hell no!
IE always gets it wrong, with the width of the top frame allways being too small.
Any ideas? Or is it truly impossible?
Belows follows my 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>Dynamic Drive: CSS Left and Top Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentLeft{ /**framecontentLeft and framecontentTop seperated for ease of review**/
position: absolute;
top: 120px;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%; /**a straight swap would be auto but that doesn't work in FireFox**/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentTop{
position: absolute;
top: 0;
left: 0; /*Set left value to WidthOfLeftFrameDiv*/ /**no longer to width of left frame**/
width: 100%;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #framecontentLeft{ /*IE6 hack*/
height: 100%;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="framecontentLeft">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentTop">
<div class="innertube">
<h1>CSS Left and Top Frames Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
</div>
</div>
</body>
</html>
I love the Left and Top Frames layout but I'd like the top to stretch across the width and the left to take what remains of the height.
It seems simple to swap lines in the CSS to make it happen, but can I get it to work, hell no!
IE always gets it wrong, with the width of the top frame allways being too small.
Any ideas? Or is it truly impossible?
Belows follows my 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>Dynamic Drive: CSS Left and Top Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentLeft{ /**framecontentLeft and framecontentTop seperated for ease of review**/
position: absolute;
top: 120px;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%; /**a straight swap would be auto but that doesn't work in FireFox**/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentTop{
position: absolute;
top: 0;
left: 0; /*Set left value to WidthOfLeftFrameDiv*/ /**no longer to width of left frame**/
width: 100%;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #framecontentLeft{ /*IE6 hack*/
height: 100%;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="framecontentLeft">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentTop">
<div class="innertube">
<h1>CSS Left and Top Frames Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
</div>
</div>
</body>
</html>