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

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

 <!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style>

body { margin: 0; padding:0; background-color:#99CC00; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; line-height:18px; }
 
/* Template */

#wrapper { width:800px; height:auto; margin:0 auto; padding:0;}

#maincontainer { float:left; width:800px; height:auto; margin:0; padding:44px 0;}

#container { float:left; width:800px; height:auto; background-color:#CCFF99; }

/* Header */

#header { float:left; width:800px; height:80px;}

#leftheader { float:left; width:270px; height:80px; margin:2px 0 0 0; padding:3px 0 0 8px; background-color:#FFFFFF; }

#rightheader { float:right; width:500px; height:80px; margin:2px 0 0 0; padding:3px 0 0 8px; background-color:#FFFF99; }

/* Header */

#bodycontainermain { float:left; width:800px; height:500px; background-color:#CCCCCC }

/* Left Cloumn */

.leftcont1 { float:left; width:150px; height:300px; margin:6px 0 0 0; padding:2px 0 0 10px; background-color:#009966; }

/* Bodyn */

.bodycontainer { float:left; width:472px; height:auto; margin:6px 0 0 0; padding:2px 0 0 8px; background-color:#CCCCCC; }

/* Right Cloumn */

.rightcont1 { float:right; width:150px; height:300px; margin:6px 0 0 0; padding:2px 0 0 10px; background-color:#009966; }

/* Footer */

#footer { float:left; width:802px; height:28px; background-color:#DAAF7B; margin:0 -3px 0 0; padding:0; }

#footerp { margin:0; padding:5px 20px 0 0; font-size:11px; color:#FFFFFF; text-align:right; }

</style>

</head>
 
<body>

<div id="wrapper">

    <div id="maincontainer">

        <div id="container">

            <div id="header">

                <div id="leftheader">rwerwer</div>

                <div id="rightheader">werewrewrew</div>

            </div>

            <div class="leftcont1">Left Column</div>

                <div class="bodycontainer"> The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!

      Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/

      O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL

      Programming (3rd edition). See oracle.oreilly.com.

      Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components

      (1st Edition, May 2001), Morgan Kaufmann.</div>

                <div class="rightcont1">Right Column</div>
 
            <div id="footer">

                <div id="footer">Copyright 2007 test.

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

Jun 28 '09 #1

Subscribe Post Reply

5492

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

Shahib

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

by: Mel | last post by:

is there such thing ? using CSS ? thanks, Mel

HTML / CSS

Header, 3 column & footer layout problem - help!

by: Andrew | last post by:

I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work,...

HTML / CSS

footer & 3 col absolute layout

by: sonya11 | last post by:

hi all, sorry I realize the topic is well known, anyway is there a way without using javascript to have a footer always under a 3 column layout with Absolute Positioning ? I don' t want to...

HTML / CSS

Header, Footer, Content Layout using DIV and CSS?

by: Grischa Brockhaus | last post by:

Hi, I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the bottom using fixed height and a content layer using what's left of the browsers window. ...

HTML / CSS

Problem with my header (help!)

by: ~john | last post by:

I'm trying to get my header to have 2 images, one for the top left and one for the top right. Here's a link to my page... http://levelwave.com/dev/div/index.html and will eventually be...

HTML / CSS

Fixed Table Header causing slow scrolling

by: dfdavis.mtu | last post by:

I have a table that I dynamically fill with data from a database for medical companies to be able to determine if their patients meet certain criteria. However they want a fixed header for it so...

HTML / CSS

<div>: can't get content under header

by: KoosHopeloos | last post by:

L.S., I'm trying to make a layout which is completely fixed in width and height if needed by using three divs rows (header, content, footer) which have each 3 div again to be able to play around...

HTML / CSS

Help Needed with Adding Image to Header

by: swc76801 | last post by:

I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com. According to the information from Amazon.com "Write your own...

HTML / CSS

100% header and 100%footer image

by: darkzone | last post by:

Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in...

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

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

Similar topics