Results 1 to 4 of 4

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

  1. #1
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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%; 
    }
    Last edited by traq; 01-16-2013 at 01:56 AM. Reason: please use the forum's BBCode tags.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    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>

  3. #3
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Quote Originally Posted by msenda View Post
    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.

Similar Threads

  1. Replies: 1
    Last Post: 10-09-2011, 01:16 PM
  2. Floating fixed columns
    By vegas1969 in forum General Paid Work Requests
    Replies: 0
    Last Post: 10-13-2008, 11:24 AM
  3. Replies: 0
    Last Post: 05-05-2008, 07:23 AM
  4. 3 columns layout - fixed fluid fixed
    By perry in forum CSS
    Replies: 2
    Last Post: 03-15-2007, 02:25 PM
  5. Border on absolute positioned div
    By trippin in forum JavaScript
    Replies: 2
    Last Post: 01-30-2007, 04:36 AM

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
  •