Member Avatar for lifeworks

Ive been asked by my boss to make a website with a fixed left column containing a menu... and a thinner fixed right column which will just be an image... the center <div> must scroll, but it must use the main browser scroll bar to move up and down, so I cant just use a scrolling div... i figure the whole page must scroll, but it will give the impression of only the center <div> moving because ill have attached the outer columns...

i have no clue how to do this....?

your help would be awesome

lworks

  • 4 Contributors
  • 5 Replies
  • 82 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by SmartBeaver
Member Avatar for almostbob 
<!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">
<!-- @(#) $Id$ -->
<head>
 <style>
 .left {width:15%; left:0; top:0; position:fixed;}
 .right {width:7%; right:0; bottom:0; position:fixed;}
 .middle {width:74%; margin-left:17%; margin-right:9%;}
 </style>
 <title>HTML demo Template</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <meta name="Generator" content="almostbob" /> <!--Humor-->
 <meta name="Keywords" content="your,keywords,here" />
 <meta name="Description" content="." />
 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class='left'> left<br>left<br>left<br>left<br>left<br>left<br>
left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>
left<br>left<br>left<br>left<br></div>
<div class='right'>right<br>right<br>right<br>right<br>right<br>right
<br>right<br>right<br>right<br>right<br>
right<br>right<br>right<br>right<br>right<br>right<br></div>
<div class='middle'> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> 
middle middle<br> middle middle<br> middle middle<br> middle middle<br> middle middle<br>
</body>
</html>

css positioning of the divs or in your case images styled similarly makes it quite easy
the two divs left and right are set at top and bottom of window, because ya can, positioning is easy to modify

Member Avatar for lifeworks

thanks so much! live and learn... :)

appreciate it!

Member Avatar for MidiMagic

That code might not work in Internet Explorer. IE puts the margins inside the widths.

Member Avatar for almostbob

funny i have IE6 and IE7 and worked as hoped in both and firefox and safari and avant and opera
byut yeah usually IE is a ...

Member Avatar for SmartBeaver

IE fails in my opinion.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.