471,852 Members | 1,455 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > html / css > questions > header,footer,left & right column fixed and body information scrolling to use div

Join Bytes to post your question to a community of 471,852 software developers and data experts.

header,footer,left & right column fixed and body information scrolling to use div

57
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all information to show as displace. please help me.

my coding are as below:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style>
  7. body { margin: 0; padding:0; background-color:#99CC00; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; line-height:18px; }
  8.  
  9. /* Template */
  10. #wrapper { width:800px; height:auto; margin:0 auto; padding:0;}
  11. #maincontainer { float:left; width:800px; height:auto; margin:0; padding:44px 0;}
  12. #container { float:left; width:800px; height:auto; background-color:#CCFF99; }
  13. /* Header */
  14. #header { float:left; width:800px; height:80px;}
  15. #leftheader { float:left; width:270px; height:80px; margin:2px 0 0 0; padding:3px 0 0 8px; background-color:#FFFFFF; }
  16. #rightheader { float:right; width:500px; height:80px; margin:2px 0 0 0; padding:3px 0 0 8px; background-color:#FFFF99; }
  17. /* Header */
  18. #bodycontainermain { float:left; width:800px; height:500px; background-color:#CCCCCC }
  19. /* Left Cloumn */
  20. .leftcont1 { float:left; width:150px; height:300px; margin:6px 0 0 0; padding:2px 0 0 10px; background-color:#009966; }
  21. /* Bodyn */
  22. .bodycontainer { float:left; width:472px; height:auto; margin:6px 0 0 0; padding:2px 0 0 8px; background-color:#CCCCCC; }
  23. /* Right Cloumn */
  24. .rightcont1 { float:right; width:150px; height:300px; margin:6px 0 0 0; padding:2px 0 0 10px; background-color:#009966; }
  25. /* Footer */
  26. #footer { float:left; width:802px; height:28px; background-color:#DAAF7B; margin:0 -3px 0 0; padding:0; }
  27. #footerp { margin:0; padding:5px 20px 0 0; font-size:11px; color:#FFFFFF; text-align:right; }
  28. </style>
  29. </head>
  30.  
  31. <body>
  32. <div id="wrapper">
  33.     <div id="maincontainer">
  34.         <div id="container">
  35.             <div id="header">
  36.                 <div id="leftheader">rwerwer</div>
  37.                 <div id="rightheader">werewrewrew</div>
  38.             </div>
  39.             <div class="leftcont1">Left Column</div>
  40.                 <div class="bodycontainer"> The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  41.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  42.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  43.       Programming (3rd edition). See oracle.oreilly.com.
  44.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  45.       (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  46.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  47.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  48.       Programming (3rd edition). See oracle.oreilly.com.
  49.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  50.       (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  51.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  52.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  53.       Programming (3rd edition). See oracle.oreilly.com.
  54.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  55.       (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  56.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  57.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  58.       Programming (3rd edition). See oracle.oreilly.com.
  59.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  60.       (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  61.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  62.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  63.       Programming (3rd edition). See oracle.oreilly.com.
  64.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  65.       (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  66.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  67.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  68.       Programming (3rd edition). See oracle.oreilly.com.
  69.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  70.       (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  71.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  72.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  73.       Programming (3rd edition). See oracle.oreilly.com.
  74.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  75.       (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
  76.       Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
  77.       O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
  78.       Programming (3rd edition). See oracle.oreilly.com.
  79.       Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
  80.       (1st Edition, May 2001), Morgan Kaufmann.</div>
  81.                 <div class="rightcont1">Right Column</div>
  82.  
  83.  
  84.             <div id="footer">
  85.                 <div id="footer">Copyright 2007 test.
  86.                 </div>
  87.             </div>
  88.         </div>
  89.     </div>
  90. </div>
  91. </body>
  92. </html>
Jun 28 '09 #1
3 5220
acoder
16,027 Expert Mod 8TB
Which browsers have you tested? position:fixed doesn't work in IE6.
Jun 29 '09 #2
drhowarddrfine
7,435 Expert 4TB
position:fixed will treat the element similar to 'absolute' so that may not be what you want. Perhaps you should play with adding 'overflow:scroll' to #wrapper.
Jun 29 '09 #3
Hi,

I have created the fixed header, footer, right and left column feature in the below blog. I hope this will help you :-)

http://s7u.blogspot.com/2008/07/dear...uss-about.html

Regards,
Shahib
Sep 27 '10 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics
footer & 3 col absolute layout
4 posts views Thread by sonya11 | last post: by
Header, Footer, Content Layout using DIV and CSS?
11 posts views Thread by Grischa Brockhaus | last post: by
Problem with my header (help!)
2 posts views Thread by ~john | last post: by
Fixed Table Header causing slow scrolling
2 posts views Thread by dfdavis.mtu | last post: by
<div>: can't get content under header
1 post views Thread by KoosHopeloos | last post: by
Markdown-ImageLocalize
reply views Thread by YellowAndGreen | last post: by
aboka
Need hep to loop through excel
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates