SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Devon, UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning problems with CSS

    http://www.challenor.f9.co.uk/bby/


    I want three rows, with a header, content and footer section. When the content is more than the window length, the header and footer are on the top and bottom; when the content is smaller, the footer is at the bottom of the window.

    All three are contained within a 'frame' section that is 600px wide, is centered on the body, and has a couple of borders.

    And it should be simple, but...?

    The two pics in 'header' and 'footer' are meant to be inside the 'frame', and I can't work out why they are not (they are nested inside in the code). Oh, and I commented out the content div (with 'ahem') to show you the weird things that happen depending on whether the content div is there or not.

    I think it's poor absolute positioning on my part, but is it possible to do what I want with relative?


    Cheers
    Ben

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Actually this is quite difficult to achieve with CSS.

    There is a version here ( http://scott.sauyet.name/CSS/Demo/FooterDemo1.html) that shows how to position a footer at the bottom of the window and then expand if more content is added, which I think is what you want.

    However it is quite complicated and doesn't work in all browsers.

    Your code could be adapted as follows:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body, #frame {
     min-height: 100%;
     width: 100%;
     height: 100%;} 
    body {margin: 0;
     font-family: Arial, sans-serif;
     margin-left: -300px;
     position: relative;
     left: 50%;
     }
    #content {
     margin-bottom: 3em;
     height: auto; 
    }
    #frame {position: absolute;
     top: 0;
     left: 0;
     width:600px;
     border-left: 2px solid #039;
     border-right: 2px solid #039;
     background-color: #edf6ff; 
    }
    #footer {position: absolute;
     bottom: 0;
     width: 100%;
    }
    </style>
    </head>
    <body>
      <div id="frame"> 
    	<div id="content"> 
    	  <p><img src="<A href="http://www.challenor.f9.co.uk/bby/title_bar.gif">http://www.challenor.f9.co.uk/bby/title_bar.gif" alt="title_bar" /></p>
    	  <p>Place your page contents here Place your page contents herePlace your 
    		page contents herePlace </p>
    	  <p>&nbsp;</p>
    	</div>
    	<div id="footer"> 
    	  <p><img src="<A href="http://www.challenor.f9.co.uk/bby/base_bar.gif">http://www.challenor.f9.co.uk/bby/base_bar.gif" alt="base_bar" /></p>
    	</div>
      </div>
    </body>
    </html>
    You might be able to salvage something from it. It will display ok in IE6 and Mozilla 1.2 (I think it aligns left in IE5. Opera 6 doesn't like it either.)

    It may be of some help to you.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Devon, UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, in the interests of browser portability (isn't that what CSS is for? lol) I have gone for mixed tables and css. Like this....

    http://www.challenor.f9.co.uk/bby2/

    In the final version I'm going to use PHP and includes so that the page html will be needed only in one (well, actually two) files.

    Oh for a time when workarounds aren't needed....


    Thanks again,
    Ben


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
  •