Add a wrapper border around 2 div columns defined by absolute and fixed position

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

HTML Code:

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

Code:

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%; 
}

**molendijk** · 01-16-2013, 04:36 PM

Code:

<!doctype html>
<html>
<head>
<title></title>
<style>
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 ;
}

#wrapper{
position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; border: 10px solid gray
}


#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: yellow;
color: black;
//padding-bottom:10px;
}

#maincontent{
//position: fixed;
position: absolute;
top: 0px; 
left: 250px; /*Set left value to WidthOfFrameDiv*/
right: 0px;
bottom: 0px;
overflow: auto; 
//background: #fff;
background:red
}

.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%; 
}
</style>
</head>

<body>
<div id="wrapper" >


<div id="framecontent">
<div class="innertube">
<img src="images/logo.png" alt="">

<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent" style="position:absolute; ">
<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>
<br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br><br>aa<br>

</div>
</div>
</div>


</body>

</html>

**msenda** · 01-16-2013, 07:35 PM

This is FANTASTIC! Thank you.

Quick Question before moving on: is it normal for the border to be on the right side of the scroll bar? (The scroll bar currently appears to be set on the left side of the border on the right.)

Thanks greatly!

-M

**molendijk** · 01-16-2013, 09:21 PM

Originally Posted by msenda

This is FANTASTIC! Thank you.

Quick Question before moving on: is it normal for the border to be on the right side of the scroll bar? (The scroll bar currently appears to be set on the left side of the border on the right.)

Thanks greatly!

-M

Yes, that's quite normal.
Good luck.