cadenwhitaker
10-20-2009, 10:08 PM
I'm using the dynamic drive skeleton css to do the following:
The width of the entire application should always be 750px (not larger, not smaller).
The application should be centered
The height should be variable to the height of the browser
There should be a scrollbar for the content inside the application
Using the DD CSS I have the following, unfortunately this does not give me a fixed width, it gives me a dynamic width. Is there a good template out there that does the same as below but with a dynamic width for the center area?
<!--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, Top, Bottom and Right Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: white;
}
#framecontentRight{
left: auto;
right: 0;
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: white;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 95px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: white;
}
#framecontentBottom{
top: auto;
height: 65px; /*Height of bottom frame div*/
bottom: 0;
}
#maincontent{
position: fixed;
top: 95px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 65px; /*Set bottom value to HeightOfBottomFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
overflow: off;
background:#fff;
}
#application {
overflow: auto;
height: 100%;
width: 100%;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 95px 150px 65px 200px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #framecontentTop, * html #framecontentBottom{ /*IE6 hack*/
width: 100%;
}
</style>
</head>
<body background="images/background.png">
<div id="framecontentLeft">
<table height="100%" align="right" width="70" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="114" align="right"><img src="images/layout_l_t.png"/></td>
</tr>
<tr>
<td background="images/layout_l_m.png"></td>
</tr>
<tr>
<td height="65" align="right"><img src="images/layout_l_b.png"/></td>
</tr>
</table>
</div>
<div id="framecontentRight">
<table height="100%" align="left" width="58" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="114" align="right"><img src="images/layout_r_t.png"/></td>
</tr>
<tr>
<td background="images/layout_r_m.png"></td>
</tr>
<tr>
<td height="65" align="right"><img src="images/layout_r_b.png"/></td>
</tr>
</table>
</div>
<div id="framecontentTop" >
<table valign="top" height="114" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/layout_t_m.png" align="left" valign="top">
<div style="margin-top:35px;color:red;">
<h1>Logo</h1>
</div>
</td>
</tr>
</table>
</div>
<div id="framecontentBottom" >
<table valign="top" height="65" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/layout_b_m.png"></td>
</tr>
</table>
</div>
<div id="maincontent">
<div id="application">
<p>Phasellus hendrerit metus in odio pellentesque fringilla non non magna. Sed ac consequat justo. Pellentesque gravida varius felis et mollis. Vestibulum venenatis vulputate nulla, nec vehicula risus tincidunt eget. Sed molestie consequat justo. Curabitur malesuada condimentum neque. Suspendisse porttitor lobortis sapien, sed blandit ligula lobortis vel. Nullam lacinia quam ac sem eleifend ut convallis neque tincidunt. Nam leo nisl, imperdiet id posuere nec, fringilla a odio. Suspendisse lectus dolor, pulvinar non commodo vel, lobortis eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Maecenas id eros est. Proin tellus ipsum, rutrum quis pellentesque dignissim, interdum non nunc. Quisque vitae lorem mauris, nec sollicitudin arcu. Maecenas congue blandit nisl eget auctor. Mauris commodo eros vel mi semper laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non ornare elit. Aliquam erat volutpat. Nunc ac ligula lacus. Fusce luctus feugiat vulputate. Donec id elit libero, in feugiat velit. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In nec pulvinar lectus. Donec erat libero, scelerisque nec placerat pharetra, faucibus iaculis felis.
<p>Nulla sed sem vel nunc iaculis imperdiet sed at nisl. Sed euismod ligula sed arcu semper ultrices. Fusce facilisis, nisl nec malesuada mattis, diam orci mollis nulla, et vulputate tortor arcu ac lorem. Aenean eleifend nisl dolor, non porttitor nibh. Curabitur sagittis turpis ac odio dictum pellentesque. Vivamus porta pretium velit, et aliquam lectus facilisis sit amet. Pellentesque sit amet quam a mi ultricies ullamcorper vitae at tortor. In hac habitasse platea dictumst. Vestibulum in adipiscing metus. Quisque venenatis hendrerit congue. Pellentesque mattis, felis iaculis ullamcorper sodales, diam libero ornare dolor, a tempor libero velit at libero. Nam tempus augue in quam tincidunt nec facilisis dui bibendum. Maecenas dolor lectus, lobortis non faucibus auctor, facilisis a tortor. Cras dolor ante, faucibus eu dapibus vel, sodales et est.
</div>
</div>
</body>
</html>
The width of the entire application should always be 750px (not larger, not smaller).
The application should be centered
The height should be variable to the height of the browser
There should be a scrollbar for the content inside the application
Using the DD CSS I have the following, unfortunately this does not give me a fixed width, it gives me a dynamic width. Is there a good template out there that does the same as below but with a dynamic width for the center area?
<!--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, Top, Bottom and Right Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: white;
}
#framecontentRight{
left: auto;
right: 0;
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: white;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 95px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: white;
}
#framecontentBottom{
top: auto;
height: 65px; /*Height of bottom frame div*/
bottom: 0;
}
#maincontent{
position: fixed;
top: 95px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 65px; /*Set bottom value to HeightOfBottomFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
overflow: off;
background:#fff;
}
#application {
overflow: auto;
height: 100%;
width: 100%;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 95px 150px 65px 200px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #framecontentTop, * html #framecontentBottom{ /*IE6 hack*/
width: 100%;
}
</style>
</head>
<body background="images/background.png">
<div id="framecontentLeft">
<table height="100%" align="right" width="70" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="114" align="right"><img src="images/layout_l_t.png"/></td>
</tr>
<tr>
<td background="images/layout_l_m.png"></td>
</tr>
<tr>
<td height="65" align="right"><img src="images/layout_l_b.png"/></td>
</tr>
</table>
</div>
<div id="framecontentRight">
<table height="100%" align="left" width="58" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="114" align="right"><img src="images/layout_r_t.png"/></td>
</tr>
<tr>
<td background="images/layout_r_m.png"></td>
</tr>
<tr>
<td height="65" align="right"><img src="images/layout_r_b.png"/></td>
</tr>
</table>
</div>
<div id="framecontentTop" >
<table valign="top" height="114" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/layout_t_m.png" align="left" valign="top">
<div style="margin-top:35px;color:red;">
<h1>Logo</h1>
</div>
</td>
</tr>
</table>
</div>
<div id="framecontentBottom" >
<table valign="top" height="65" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/layout_b_m.png"></td>
</tr>
</table>
</div>
<div id="maincontent">
<div id="application">
<p>Phasellus hendrerit metus in odio pellentesque fringilla non non magna. Sed ac consequat justo. Pellentesque gravida varius felis et mollis. Vestibulum venenatis vulputate nulla, nec vehicula risus tincidunt eget. Sed molestie consequat justo. Curabitur malesuada condimentum neque. Suspendisse porttitor lobortis sapien, sed blandit ligula lobortis vel. Nullam lacinia quam ac sem eleifend ut convallis neque tincidunt. Nam leo nisl, imperdiet id posuere nec, fringilla a odio. Suspendisse lectus dolor, pulvinar non commodo vel, lobortis eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Maecenas id eros est. Proin tellus ipsum, rutrum quis pellentesque dignissim, interdum non nunc. Quisque vitae lorem mauris, nec sollicitudin arcu. Maecenas congue blandit nisl eget auctor. Mauris commodo eros vel mi semper laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non ornare elit. Aliquam erat volutpat. Nunc ac ligula lacus. Fusce luctus feugiat vulputate. Donec id elit libero, in feugiat velit. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In nec pulvinar lectus. Donec erat libero, scelerisque nec placerat pharetra, faucibus iaculis felis.
<p>Nulla sed sem vel nunc iaculis imperdiet sed at nisl. Sed euismod ligula sed arcu semper ultrices. Fusce facilisis, nisl nec malesuada mattis, diam orci mollis nulla, et vulputate tortor arcu ac lorem. Aenean eleifend nisl dolor, non porttitor nibh. Curabitur sagittis turpis ac odio dictum pellentesque. Vivamus porta pretium velit, et aliquam lectus facilisis sit amet. Pellentesque sit amet quam a mi ultricies ullamcorper vitae at tortor. In hac habitasse platea dictumst. Vestibulum in adipiscing metus. Quisque venenatis hendrerit congue. Pellentesque mattis, felis iaculis ullamcorper sodales, diam libero ornare dolor, a tempor libero velit at libero. Nam tempus augue in quam tincidunt nec facilisis dui bibendum. Maecenas dolor lectus, lobortis non faucibus auctor, facilisis a tortor. Cras dolor ante, faucibus eu dapibus vel, sodales et est.
</div>
</div>
</body>
</html>