Web page Header and footer

Posted on 2006-03-21
Last Modified: 2008-02-01
I am using dreamweaver to create web site, I don't want to use frame to devide my page, is there any other way
to have certain area fixed in the page and another areas display different information, I know how I do that using frames, I am looking for another solution
Question by:asamuel
    LVL 5

    Expert Comment

    Not sure if this is exactly what you are after but you can use tables for layout purposes as follows:

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

    <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
        <td height="100px"><div align="center">This would be the Header Section</div></td>
        <td height="100%"><div align="center">This would be where your content would
            go. </div></td>
        <td height="100px"><div align="center">This would be the Footer Section</div></td>

    The above code creates a 100% x 100% table consisting of 3 rows and 1 column. I have fixed the top and bottom row height to 100 pixels but they too can be set to a % value and will therefore scale as the browser window is resized.

    To utilise this method, the content for your header section would go in between the first <td> and </td> tags. The content for the page body would go in between the second <td> and </td> tags and finally the content for your footer section would go in between the last <td> and </td> tags.

    Using tables with width & height set to % means that the content areas will resize dependant on the available screen area. Setting both values to 100% means that the table will expand to fit the entire available screen and will resize if the browser window is resized.

    Be aware that the use of layout tables is regarded as obsolete so you may wish to use Cascading Style Sheets instead. I still use layout tables when designing in-house websites because I find it a far quicker method.

    Hope this helps, if not then post a comment and I'll try and help further.


    Author Comment

    This is good thank you, how to do that with CSS
    LVL 5

    Accepted Solution

    The following is something similar using CSS inline styles.

    <title>Layout with CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    <body leftmargin="0" topmargin="0">
    <div align="center" id="Layer1" style="position:absolute; overflow:auto;top:0; left:0; width:100%; height:20%; z-index:1; background-color: #CC3300; layer-background-color: #CC3300; border: 1px none #000000;">Header<BR>
      <div align="center" id="Layer2" style="position:relative; overflow:auto;top:20%;left:0;width:100%; height:60%; z-index:1; background-color: #CC6600; layer-background-color: #CC6600; border: 1px none #000000;">Content<BR>goes<BR>here<BR></div>
    <div align="center" id="Layer3" style="position:relative; overflow:auto;top:20%;width:100%; height:20%; z-index:3; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000;">Footer<BR>Goes<BR>Here<BR></div></div>

    If you resize your browser to a short height you will notice that scrollbars appear. This is caused by the overflow property being set to auto.

    I've spilit the page 20-60-20 but you can obviously change this to suit your needs.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
    Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
    This video is in connection to the article "The case of a missing mobile phone (". It will help one to understand clearly the steps to track a lost android phone.
    In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor ( If you're interested in additional methods for monitoring bandwidt…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now