msenda
01-16-2013, 02:52 AM
Hi, I found this lovely two column template from dynamic drive, where left navigation column (#framecontent) is fixed and non-scrollable, while the main content div (#maincontent) is positioned "absolute", stretches right to the edge of the page, and has the capability to scroll.
I'd like to have one border of about 10px containing both of these divs, and have the border go right to the edge of the page. I created a wrapper div tag with some padding hoping it would work, but hasn't. Is there a way to do this (with or without a wrapper div)?
(html and css below)
Thx,
-M:o
</head>
<body>
<div id="wrapper">
<div id="framecontent">
<div class="innertube">
<img src="images/logo.png" />
<h1>CSS Left Frame 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>
</div>
html{ padding:0;
margin:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
background-color: url("../images/background_tile.png") repeat-x ;
}
#framecontent{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 250px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: white;
color: black;
padding-bottom:10px;
}
#maincontent{
position: fixed;
top: 0px;
left: 250px; /*Set left value to WidthOfFrameDiv*/
right: 0px;
bottom: 0px;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
I'd like to have one border of about 10px containing both of these divs, and have the border go right to the edge of the page. I created a wrapper div tag with some padding hoping it would work, but hasn't. Is there a way to do this (with or without a wrapper div)?
(html and css below)
Thx,
-M:o
</head>
<body>
<div id="wrapper">
<div id="framecontent">
<div class="innertube">
<img src="images/logo.png" />
<h1>CSS Left Frame 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>
</div>
html{ padding:0;
margin:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
background-color: url("../images/background_tile.png") repeat-x ;
}
#framecontent{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 250px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: white;
color: black;
padding-bottom:10px;
}
#maincontent{
position: fixed;
top: 0px;
left: 250px; /*Set left value to WidthOfFrameDiv*/
right: 0px;
bottom: 0px;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}