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
  • 102 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by SmartBeaver

Dani AI

Generated

’s example is a solid starting point for the effect described: fixed side panels that stay put while the document (the centre column) uses the browser scrollbar. A few practical pitfalls and improvements worth adding, especially given and ’s IE concerns.

Keep layout in standards mode. Old IE box‑model quirks can make margins and widths behave oddly; a proper standards DOCTYPE avoids most of that (see MDN on Quirks Mode and Standards Mode). Use box-sizing: border-box to include padding/border in width math and reduce overflow surprises (box-sizing).

Common troubleshooting checklist

  • Reset the default body margin (body { margin: 0; }) — that 8px can create unwanted scrollbars.
  • Verify computed widths in dev tools so left + middle + right do not exceed 100% (percent rounding can add an extra pixel).
  • Give fixed sidebars explicit stacking (z-index) if dropdowns or overlays from the centre must appear above/below them.
  • On narrow viewports, convert the fixed columns to normal flow with media queries (hide or move the right image) for a usable responsive fallback.

Browser support notes: position: fixed is fine in modern browsers; legacy IE6 does not support it, which explains ’s comment. For historical IE6 support, the usual approach was conditional CSS/JS that emulates fixed positioning, but progressive enhancement (letting older browsers show a simpler layout) is usually preferable. MDN’s page on position has compatibility details.

Recommended Answers

All 5 Replies

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.