busnut Posted July 18, 2009 Share Posted July 18, 2009 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... Quote Link to comment Share on other sites More sharing options...
Hybride Posted July 19, 2009 Share Posted July 19, 2009 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. Quote Link to comment Share on other sites More sharing options...
busnut Posted July 19, 2009 Author Share Posted July 19, 2009 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.