Advanced Search

Results 1 to 2 of 2

Thread: fixed width center column, dynamic height, scrollbars

  1. #1
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default fixed width center column, dynamic height, scrollbars

    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?

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

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    I think flipping these around will work but haven;t tested it

    Code:
    #framecontentTop, #framecontentBottom{
    
    width: 750px;
    
    }
    
    #framecontentRight{
    
    width: auto; /*Width of right frame div*/
    
    }
    
    #framecontentLeft, #framecontentRight{
    
    width: auto; /*Width of left frame div*/
    
    }

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
  •