Jump to content

Recommended Posts

G'day

 

I've been searching the net and have found a couple of css codes that do similar to what i'm looking for, but there are always something in the script that doesn't fully add up for me, or they include headers/footers or a 3rd frame or just don't want to work between IE, FF, Safari and who knows what else...

So, this is what i'm looking for. I want a css script that is 100% height, 100% width, then the left frame is 200px wide, the main frame takes up the rest of the width of the screen, and when there is scrollable content (ie, more text than screen space), I only want the content frame to scroll, but not the left frame, and all frames have a 5px padding (which is another aspect that I found with one script I used that FF & Safari dropped down by double from the top).

So has anyone got something like that, that I can use. I've tried to make my own, but either fail with the scrolling, or the height issue.

My other issue is i've found that whilst what i've tried also will work say in IE 8, but not IE6 due to some fixed positioning or something like that.

Any assistance is greatly appreciated...

Show what code you have so far, and if you do, a live version (page) that has that code being applied.

 

Rather than getting someone else to do it, it's better in the long run to have you learn how to do it yourself. ;)

G'day, here is a working demo

http://btbuses.info/test/3.php

this is where I originally got the code from (as to credit the original author) http://limpid.nl/lab/css/fixed/left-sidebar

So far that is probably the better of the codes which is also most workable also that i've trialled. However in FF & Safari, it seems to drop down abit further.

And here is the code

<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed left-sidebar</title>
<style type="text/css">
body{
  margin:0;
  padding:0 0 0 200px;
}
div#left-sidebar{
  position:absolute;
  top:0;
  left:0;
  width:190px;
  height:100%;
  background: #CCCCCC;
}
@media screen{
  body>div#left-sidebar{
   position:fixed;
  }
}
* html body{
  overflow:hidden;
} 
* html div#content{
  height:100%;
  overflow:auto;
}
</style>
<div id="left-sidebar">
  <p>Navigation</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<div id="content">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>0</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>0</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>0</p>
</div>

 

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.