SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: DIVs & Frames

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIVs & Frames

    I'm looking for a tutorial or guide that can explain me how I can make a DIV act like a frame, do any of you know of one?

    My website is divided into two parts, the content and the footer. I want the footer to act like a frame, that is, it's always displayed, but I don't want the footer to overlap the content.

    Thanks

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're saying you want the footer to always display at the bottom of the page?

    Assuming you have your page broken down into two sections (content, which I will assume is a <div> with an ID attribute of "content" and a <div> with an ID attribute of "footer"), just set a style rule declaring the footer's position to be fixed (plus a height for the footer), and then add a bottom margin to the content div.

    Like this:

    Code:
    <div id="content">
      (page content goes here)
      </div>
      <div id="footer">
      (footer content goes here)
      </div>
    In your style sheet, add the following:

    Code:
    #content {
      margin-bottom: 5em;
      }
      #footer {
       height: 5em;
      position: fixed;
      bottom: 0;
      left: 0;
      }
    Keep in mind though, that fixed positioning will not work in Internet Explorer (however, and please do not quote me on this, I think it works in Internet Explorer 7 Beta 2).

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the content is longer than the viewport you still want the footer to appear at the bottom of the page but you want the content div to scroll? If that's correct then you should be able to do a modified version of Paul O'Brien's "footer at the bottom" tutorial found at http://www.sitepoint.com/forums/show...66&postcount=3.

    The difference is that you won't set the height of the wrapper div (which would be your content div) to auto (or anything at all), instead you'll set overflow to scroll.

    HTH

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats what I currently have setup, I never thought about the footer on the content. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •