Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    jwmollman
    Guest

    Left div is fixed on page, do not want this

    I'm trying to design a simple two column webpage, and I think I've made it harder than it really is. I can't seem to get the left divider to scroll with the page. It stays constant, and the right divider is the only thing that scrolls. I want the left divider to scroll with the right divider, as if everything was one page, not separate pages. Any idea on what I should do to fix this?

    HTML:
    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!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">
    	<head>
    		<title>mrMollman, homepage of John Mollman</title>
    		<link rel="icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.png" />
    		<link rel="shortcut icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.png" />
    		<link rel="stylesheet" type="text/css" href="styles/index.css" />
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="description" content="Homepage of John Mollman" />
    		<meta name="keywords" content="mrmollman, mollman, mr, artwork, pixel, pixel art, art, isometric, 
    				isometric pixel art, isometric pixel, illustrations, sketches, drawings, software, john,
    				john mollman" lang="en-us" />
    		
    		<!--
    			Website written and designed by John Mollman
    			All graphics/images created by John Mollman
    			email: jw.mollman@gmail.com
    			http://www.mrmollman.com/
    		-->
    	</head>
    
    	<body>
    		<div id="leftWrapper">
    			<ul>
    				<li class="here">here/</li>
    				<li><a href="pixelart.html">pixel art</a></li>
    				<li><a href="sketches.html">sketches</a></li>
    				<li><a href="comics.html">comics</a></li>
    				<br />
    				<li class="there">there/</li>
    				<li><a href="http://pixeljoint.com/p/27143.htm">pixeljoint</a></li>
    				<li><a href="http://identi.ca/jwmollman">identi.ca</a></li>
    				<li><a href="http://last.fm/user/jwmollman">last.fm</a></li>
    				<li><a href="mailto:jw.mollman@gmail.com">email</a></li>
    			</ul>
    			
    			<br />
    			<p class="copyright">John Mollman &copy; 2010</p>
    		</div>
    
    
    		<div id="rightWrapper">
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    		</div>
    	</body>
    </html>
    CSS:
    Code:
    /* stylesheet for the index page */
    
    body {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	overflow: hidden;
    	height: 100%;
    	max-height: 100%;
    	color: #2e2e2e; /* #d8d8d8 for dark layout */
    }
    #leftWrapper {
    	font: 18pt Arial, Helvetica, sans-serif;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	width: 225px;
    	height: 100%;
    	overflow: hidden; /* this disables scrollbars, set to "scroll" to enable */
    	background-color: #efefef;
    	color: #2e2e2e;
    }
    #rightWrapper {
    	font: 12pt Arial, Helvetica, sans-serif;
    	position: fixed;
    	top: 0;
    	left: 225px; /* set left value to WidthOfFrameDiv */
    	right: 0;
    	bottom: 0;
    	padding: 0 25px 0 25px;
    	overflow: auto;
    	background-color: #fff;
    }
    ul li.here,
    ul li.there {
    	margin-left: -25px;
    }
    ul li {
    	padding-top: 10px;
    	list-style-type: none;
    }
    p.heading {
    	font-size: 48pt;
    	text-align: center;
    }
    p.subheading {
    	font-size: 18pt;
    	text-align: center;
    	color: #bdbdbd;
    }
    p.copyright {
    	left: 0;
    	right: 0;
    	text-align: center;
    	font-size: 10pt;
    	color: #2e2e2e; /* #d8d8d8 for dark layout */
    }
    hr {
    	border: 1px solid #bdbdbd;
    	width: 305px;
    	margin-top: -40px;
    }
    a {
    	text-decoration: none;
    	color: #848484;
    }
    a:link {
    	text-decoration: none;
    	color: #848484;
    }
    a:hover {
    	text-decoration: underline;
    	color: #000;
    }
    a:active {
    	text-decoration: underline;
    	color: #000;
    }
    
    
    
    
    /* IE6 hacks */
    * html body {
    	padding: 0 0 0 200px; /* set value to (0 0 0 WidthOfFrameDiv) */
    }
    * html #maincontent {
    	height: 100%;
    	width: 100%;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Do you really need those fixed/absolute positions? Re you trying to make something like http://bonrouge.com/2c-hf-fixed.php ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    jwmollman
    Guest
    Quote Originally Posted by abduraooft View Post
    Do you really need those fixed/absolute positions? Re you trying to make something like http://bonrouge.com/2c-hf-fixed.php ?
    Yes that's exactly what I need. I'll try to work with that some more.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •