CSS positioning

Factual Questions
1

I am trying to position a page footer div at the bottom of a web page, right underneath a main content div which is positioned absolutely, and will mostly be 350px high, but on one page will need to be flexible to accommodate more content. Positioning absolutely won’t work for this flexibility of course, but when I’ve tried positioning relatively, it seems to ignore the content div and positions it relative to the top of the page.

Perhaps complicating things is that the footer, along with the banner images and main navigation, are PHP includes, so they can be updated across all pages at once if needed at some point. The content div is coded on each page, since each page will have different copy.

I’ve tried clear:both; on both the content div and the footer div, but it doesn’t help. I tried position:absolute; bottom:30px; instead of positioning from the top, but that puts the footer 30px from the bottom of the browser window instead of the bottom of the page, regardless how long the page is – so I have the footer in the middle of the content. Position:relative; bottom:30px; puts it back at the top of the page.

I’m at a loss. I don’t even know what to google at this point. Why is it ignoring the content div? How can I get it to position underneath it, regardless how long it is?

Relevant page code:



<body>

<? include("includes/mainnav.php"); ?>

<? include("includes/banner.php"); ?>

<div id="content">
	
  <h1>Page</h1>
  
  <p>Copy here.</p>

</div>

<? include("includes/footer.php"); ?>

</body>

CSS:



#content {
	position:absolute;
	top:215px;
	left:330px;
	width:47%;
	height:350px;
	z-index:4;
}

#footer {
	position:absolute;
	top:590px;
	left:330px;
	width:47%;
	height:30px;
	z-index:4;
}
2

The php doesn’t matter as it’s processed server side and the resulting page is static by the time it reaches the browser.

In your example, I am not sure why anything needs positioning. Remove all the positioning CSS and it should flow just fine.

As to why what you are doing isn’t working - relative positioning is relative to the natural position of the element, not the previous element - a subtle but sometimes important distinction. It mostly becomes important if the ‘content’ of the previous element is malformed, which given the behavior described (relative jumping to top of the page) is likely what your problem is.

3

They need to be positioned so that they don’t lie on top of the navigation menu on the left or the banner images on the top. Removing the positioning from the footer and content divs puts them up at the top left.

I’m not sure what you mean by the content being malformed. It is literally just the <h1> tags and a couple sets of <p> tags. Aside from the copy being different, it’s exactly what you see above.

4

Malformed means invalid html/xml - you can test a page to see if it’s malformed pretty easily using the W3C tool: http://validator.w3.org/

If that’s not helpful I’d have to actually load your code up and start playing around with it, and I’m not really up for that at the moment (sorry) :frowning: Perhaps someone else can chime in.

5

No.

Think Kiss Principle. Try these for starters —> http://www.free-css.com/

6

Don’t absolutely position the footer. And instead of top and left, use margin-top/margin-left or padding-top/padding-left. That’ll give you the relativistic spacing you want. It might also help to put the footer as a div INSIDE the content instead of after it (hard to say without seeing your complete design).

If you show me a screenshot with the elements clearly identified – or better yet, the complete page, images and navbar included – I can more precisely fix the CSS for ya.

7

Still a work-in-progress (need some more stuff from the client), but here you go:

http://www.lawstonfown.com/

I have not tried putting the include inside the content div… I suppose I could. I’m holding off for now as I’m not sure how much media he’s planning to put on the media page, which may not require messing with the footer positioning at all.

It would be nice to know for future reference, though.

8

This is how I do it.

A min-height and a clearfooter div in the right arrangement does the trick. No matter how much content there is, if it’s less than a page’s worth it’s at the botom of the browser, if there’s more than a page’s worth it’s placed at the end of the content div.

9

(Oops, hold on)

10

So, basically, just running the link you provided through the tool I linked produces 5 errors. I’d start there.

Validated page

11
  1. Add one more layer, #layout, to your page, as such:



<div id="layout">
<div id="content">

<!-- Main copy starts here: edit only between these flags -->

  <h1>Your Creative Partner </h1>
  blah blah blah
  
<!-- Main copy ends --> 
</div>
  
<div id="footer">
  <p>Copyright © 2011 Lawston Fown<br>
    Site design by <a href="http://www.autumneve.com/" target="_blank">Autumn Eve dot com</a> </p>
</div>
</div>
  1. Edit your css so that
    a) Most of the #content attributes are moved to #layout
    b) The 350px height is kept in #content but changed to min-height
    c) The footer loses its absolute positioning and is given a 100% width


#layout {
	position:absolute;
	top:215px;
	left:330px;
	width:47%;
	z-index:4;
}

#content {
	min-height: 350px;
}

#footer {
	width:100%;
	height:30px;
	z-index:4;
}

This should flow with any amount of text in #content. If I were you I’d spend a few minutes to make the entire size out of margins and not absolute positioning (it’s easier to work with that way), but it’s not entirely necessary.

12

I meant you should consider making the entire PAGE, not SIZE, using margins instead of absolute positioning. Oops.

13

Reply, thank you, your solution has mostly worked.

For reference, I had to add a couple things to #footer to get spacing and positioning right:



#layout {
	position:absolute;
	top:215px;
	left:330px;
	width:47%;
	z-index:4;
}

#content {
	min-height::350px;
}

#footer {
	clear:both;
	width:100%;
	padding-top:30px;
	z-index:4;
}

However, the min-height attribute for #content doesn’t seem to work. Checking it with Firebug, that part of the style sheet is showing up like this, as if the attribute isn’t in the stylesheet:



#content {
}

So, for the index page which has less copy, the #content computes to 226px and the footer is up in the middle of the page.

I’ve already tried adding min-height to #layout (both as-well-as #content, and instead of #content) but it renders the same way.

It’s not a total deal-killer – it’s better than the alternative – but if there’s something I can do to correct it I’d like to.

ETA: and of course I see it as soon as I post it. Let me remove that extra : and get back to you. :stuck_out_tongue:

14

Okay, I got it. It wasn’t the extra colon either (although that didn’t help). I’d gotten confused about the order in which to close the div tags, so the #footer include ended up inside #content, too, instead of outside of it and inside #layout.

Thanks for the help.

15

So you got it working? Great!

16

So, while I wait on a response to my support ticket, does anyone have any guesses as to why a form processing script works fine on my hosting server, but not on the client’s? Both servers run PHP5. The client’s host is Dreamhost, if it matters.

17

Can you tell us more?

You mean the blank thank you page? What’s the source code or name of the script you’re using?

Did you check Dreamhost’s options for PHP in the control panel? Sometimes the exact version number (5.2, 5.3) or other settings can make a difference.

You can make a phpinfo page on both hosts to compare the configuration differences. Also, Dreamhost, has one of the more popular hosts, has a lot of useful forum and wiki posts. Try Googling for the name of your script or the error message + Dreamhost to see if anything comes up.

18

Also, random guess, but does the recaptcha API require a certain domain name?

19

Not getting an error message, just the blank page. The Captcha widget works fine, btw, if I remove the form processing script it works as expected. Add the processor back in and I get the blank thank you page, and it doesn’t process/email the form info.

Dreamhost is set to PHP 5.2 FastCGI. I have no idea what the FastCGI thing is. Mine is PHP 5.2 too.

The script:



<?php

require_once('recaptcha/recaptchalib.php');
$privatekey = "private_key_here";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if(!$resp->is_valid) {
header("location:captchaerror.php");
die();

  } else {
    // Your code here to handle a successful verification
	
$email = "email@email.com";

$continue = "index.php";
// This line prevents values being entered in a URL

if ($HTTP_SERVER_VARS['REQUEST_METHOD'] != "POST"){exit;}

$name = stripslashes($HTTP_POST_VARS['name']);
$emailaddr = $HTTP_POST_VARS['emailaddr'];
$phone = stripslashes($HTTP_POST_VARS['phone']);
$service = stripslashes($HTTP_POST_VARS['service']);
$referredby = stripslashes($HTTP_POST_VARS['referredby']);
$messagetext = stripslashes($HTTP_POST_VARS['messagetext']);

$subject = "Lawston Fown Webform: $service";
$message = "Name: $name
 Email Address: $emailaddr
 Phone: $phone
 Referred by: $referredby

";
$message .= "Which Service?: $service

";
$message .= "Message: $messagetext

";

$headers = "From: " . $emailaddr . "
" . "Return-Path: " . $emailaddr . "
" . "Reply-To: " . $emailaddr . "
";

mail($email,$subject,$message,$headers);

}
?>

It’s the “else if” stuff that’s causing problems. Remove everything below that and the page comes up not blank, although of course the info doesn’t get processed.

My understanding of PHP is pretty limited. I basically grabbed this processing script from the website of my then-employer some years, which had been written by the programmer who’d built the website (and left before I got there, so I was tasked with website updates). I don’t have enough programming knowledge to build a new script from scratch.

20

The keys were set to be global, and I had the client set them up under his domain, anyway. If they were non-global they’d break on MY site, not his.