...

View Full Version : Left div is fixed on page, do not want this



jwmollman
06-06-2010, 05:23 AM
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:


<?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:


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

abduraooft
06-06-2010, 11:55 AM
Do you really need those fixed/absolute positions? Re you trying to make something like http://bonrouge.com/2c-hf-fixed.php ?

jwmollman
06-06-2010, 07:25 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum