positioning a footer so that body does not overlap when using absolute positioning

[toolmania1]

Hello,

I am requesting advice on what to do with my footers. I use absolute positioning on my sites. I also center the first div using left:50%; and margin-left: -475px;
I normally make my site 950 px; wide. So, 1/2 of 950 = 475. That is how I can center my site using a main container div.
I have all of that down and working nicely. However, the footer is my problem. I made an xml file for the client. They can update it when they want. On one of the pages in my site, this xml file is displayed. So, if they edit it, I am afraid that the content could run over top of the footer at the bottom. I use a height in my divs also. So, first off, should I never use a height? I think I had some reasons that I cannot remember right now for using the height.
Regardless, can I mix absolute and relative positioning? I thought that maybe I could tell the footer div to always displays at the bottom 100 px, no matter what. Is that possible? I know and use top like so: "top:10px;". Can this be done with something like "bottom:100px;". Even if the body expanded like its height like in the case where the client edits the xml to be longer than it is right now, I would not have a problem then since the footer would always be the bottom 100px.

Any ideas on how I can use my absolute positioning on the majority of the page but then make the footer be at the bottom x amount of pixels every time? I guess a % would work also, but I get a little nervous about % because I want to control how the page looks ( hence my heavy use of absolute positioning. )

Here is an example of my layout

<div class="container">
<div class = "banner>.....</div>
<div class="body">....</div>
<div class="footer">....</div>
</div> // end the container div

.container
{
position:absolute;
left:50%;
margin-left:-475px;
//other stuff
}

.banner
{
position:absolute;
left:0px;
top:0px;
height:200px;
//other stuff
}

.body
{
position:absolute;
left:0px;
top:200px;
height:500px;
//other stuff
}

.footer
{
position:absolute;
left:0px;
top:700px;
height:100px;
//other stuff
}

So, if the body is larger than 500px in height, I have a problem with the body overlapping the footer content.

Thanks in advance for any help!

 

[chrishirst]

Simple! If you want control over how the document looks do NOT use absolute positioning!!

 

[Phreaddee]

chris is right, absolute positioning is like an auto transmission.

more control will be had across more devices with not using absolute.

 

[toolmania1]

Thank you for the responses. I can see the points you are making. However, I would like to continue this discussion with the following. My sites look the same on every web browser and on every resolution. I don't need any hacks in my css. So, I think there is some value in absolute positioning.

Could you provide some more information as to why absolute positioning is bad?

Also, could you provide alternatives using some of the sample code I posted above?

Is is also possible to just make the footer be relative with all the rest being absolute?

Thank you for your time and responses. I really do appreciate gaining insight for people who are willing to help

 

[Phreaddee]

My sites look the same on every web browser and on every resolution. I don't need any hacks in my css. So, I think there is some value in absolute positioning.

actually it'll only look "right" if your got 950x800 free screen realestate. It won't work very well on smartphones and will probably break when zoomed in or out.

 

[ronaldroe]

Read up on box model. Here's an article that explains positioning specifically.

 

[toolmania1]

I just moved my resolution down to 800 x 600. Only the very sides of the site are cut off. Remember, I use a main container and center that on every browser and resolution. So, I will lose the sides of my site only. And I barely lose anything. The links on the sides are still clickable. One or two letters are missing.

Also, it is not current theory to design for 800 x 600 anymore. That resolution is too old by now. Most monitors run 1024 x 768 minimum and most likely are up around 2000 x something.

On a phone, it is not going to look right at all. That is correct. I don't know enough about how to make it fit on a phone AND fit for a web site viewed on a computer at the same time. What I have seen is that a brand new page is made for mobile devices. ESPN does this for example. So, for me to make my main site look good on a computer that is most likely running 1024 x 768 or higher and also look good on a device probably running something close to 300 x 200 seems like not a good idea to me. But, I am no expert. Maybe some of you know how to do that, but I don't.

I am willing to learn. I will also read that link above.

I still don't see how my site is flawed though for absolute. All I need is for the body to expand its height to whatever and have the footer just fall in under it.

 

[toolmania1]

I am really shocked at myself. But, I cannot get the footer to be at the bottom. The stuff I put into #footer is what I want at the bottom. Am I missing something. Here is my code:


===========================
<!DOCTYPE HTML>
<html>

<head>
<title>Blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet1.css" rel="stylesheet" type="text/css">
<link href="carouselCSS.css" rel="stylesheet" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>

<?php

include 'jqueryForAnimateVideos.js'

?>

</script>

</head>
<body style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div class = "container">

<div id="main">

<div id="banner">

<?php
include'bannerContent.html';
?>

</div><!-- end banner div -->

<div id="navigationBar">

<?php

include 'navigationBar.php';

?>

</div> <!-- end navigationBar div -->

<div id="leftSideNavContainer">

<?php
include 'leftSideNav.php';
?>

</div> <!-- End leftSideNavContainer div -->

<!-- This div will be for the white box in the body of the page -->
<div id="whiteBoxBody" >

<div class="animateVideos">

<?php
include 'animateVideos.php';
?>

</div><!-- end animateVideos div -->

</div> <!-- end whiteBoxBody div -->

</div><!-- end main div -->

</div> <!-- end container div -->

<div id="footer">

<?php

include("footer.html");

?>

</div><!--end footer div -->

</body>
</html>

================= css =================

@charset "utf-8";
/* CSS Document */
* /* remove all default browser border and padding from page to start with here, then create your own below */
{
border:none;
margin: 0;
padding: 0;
}

body
{
background-color: #696969;
}

input, textarea /* created to use on form for contact us page */
{
border:1px solid #dadada;
border-radius:1px;
}

input:focus /* created to use on form for contact us page */
{
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}

a:link /* unvisited link */
{
color:black;
text-decoration:none;
}

a:visited /* visited link */
{
color:black;
text-decoration:none;
}

a:hover /* mouse over link */
{
text-decoration:none;
color:red;
}

a:active /* selected link */
{
color:black;
text-decoration:none;
}

a img
{
border-style:none;
}

#container
{
position:relative;
top:0px;
left:0px;
width:100%;
background-color:black;
}

#main
{
position:absolute;
left:0px;
top:0px;
width:100%;
height:1500px;
}

/* banner section */
#banner
{
position:absolute;
left:0px;
top:0px;
width:100%;
height:50px;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='black', endColorstr='#696969');
background: -moz-linear-gradient(top, black, #696969);
background: -webkit-gradient(linear, left top, left bottom, from(black), to(#696969));
background: -webkit-gradient(linear, left top, left bottom, from(black), to(#696969));
}

#navigationBar
{
position:absolute;
left:0px;
top:120px;
width:100%;
height:30px;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#0276cf', endColorstr='#6694b7');
background: -moz-linear-gradient(top, #0276cf, #6694b7);
background: -webkit-gradient(linear, left top, left bottom, from(#0276cf), to(#6694b7));
background: -webkit-gradient(linear, left top, left bottom, from(#0276cf), to(#6694b7));
}

#whiteBoxBody
{
/*background-color:#45a638;*/
position:absolute;
left:12%; /* must be at 200 to it does not overlap leftSideNav div */
right:12%;
top:150px;
width:76%;
z-index:500;
height:1500px;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#45a638', endColorstr='#696969');
background: -moz-linear-gradient(top, #45a638, #696969);
background: -webkit-gradient(linear, left top, left bottom, from(#45a638), to(#696969));
background: -webkit-gradient(linear, left top, left bottom, from(#45a638), to(#696969));
/*border:1px solid;*/
}

#footer
{
position:relative;
left:0px;
top:1510px;
width:100%;
height:15px;
/*background-color:#0276cf;*/
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#0276cf', endColorstr='#6694b7');
background: -moz-linear-gradient(top, #0276cf, #6694b7);
background: -webkit-gradient(linear, left top, left bottom, from(#0276cf), to(#6694b7));
background: -webkit-gradient(linear, left top, left bottom, from(#0276cf), to(#6694b7));
z-index:1;
}


/* main content section */

#home
{
position:absolute;
left:30px;
top:5px;
max-height:15px;
}

#aboutUs
{
position:absolute;
left:75px;
top:5px;
max-height:15px;
}

#calendar
{
position:absolute;
left:150px;
top:5px;
max-height:15px;
}

#supporters
{
position:absolute;
left:215px;
top:5px;
max-height:15px;
}

#audioVisual
{
position:absolute;
left:290px;
top:5px;
max-height:15px;
}

#news
{
position:absolute;
left:385px;
top:5px;
max-height:15px;
}

#products
{
position:absolute;
left:430px;
top:5px;
max-height:15px;
}

#donations
{
position:absolute;
left:495px;
top:5px;
max-height:15px;
}

#wantToHelp
{
position:absolute;
left:570px;
top:5px;
max-height:15px;
}

#prayerRequest
{
position:absolute;
left:672px;
top:5px;
max-height:15px;
}

#jobPostings
{
position:absolute;
left:780px;
top:5px;
max-height:15px;
}

/* end main content section */

/* footer section */

.Address
{
position:relative;
left:100px;
top:0px;
width:100%;
z-index:3000;
}


/* end footer section */

/* animate the videos section*/

.animateVideos
{
position:absolute;
left:50px;
top:100px;
}

/* end animate the videos section */

 

[ronaldroe]

I am really shocked at myself. But, I cannot get the footer to be at the bottom. The stuff I put into #footer is what I want at the bottom. Am I missing something.

Dude, the answer has been given. It's the same as the answer to this question. You've denied the logic behind the answer given, yet you are still asking the same questions. You have the answers you need, you just need to accept them. Absolute positioning has a very helpful and useful purpose: to take certain items out of document flow and place them where needed. The intended purpose is to use this function for items that shouldn't or don't need to be in the document flow. Page headers, main content areas, footers, sidebars, you name it aren't intended to be yanked out of the document flow and pinned to some arbitrary coordinate in the viewport. Your site won't work on mobile, and you don't understand how to make it do so because you don't understand the box model or how positioning and offsets work or are intended to work.

 

[toolmania1]

I went to the site you posted and it didn't help me.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Maybe you can explain something I am missing. I read that page, and there is a top relative box. Then, the boxes inside that box are absolute. I have done that. It never shows up correctly for me unless I give the body div a height. I don't want the body div to have a height.

I also have been trying many, many times with combinations of relative and absolute and nothing has worked without that height being a set number for the body.

I see the answer above. I still don't understand. I understand the box model more than you are giving me credit for but definitely not as much as you do. I have read your other posts and I respect your information and believe you. As of right now though, I am still stuck. Thanks for the posts.

 

[ronaldroe]

You're going to have the footer problem, because with absolute positioning, the footer no longer comes after the content area in the DOM. All of the elements are given position based on your settings, and will overlap based on their z-index. They won't push one another up or down, because that would disrespect the absolute position values you've given them.

Give this a try: try to do everything you're doing using only the default value for the position rule. Use margin:0 auto; to center your container. Don't use offsets to push elements around, just let them push one another down naturally and give them breathing room using top or bottom margins. Once you've done that, set all of them to position:absolute and see what happens. Then, set .container to position:relative and watch what happens. You should kinda get a feel for why the footer thing happens after that.

 

[chrishirst]

It never shows up correctly for me unless I give the body div a height. I don't want the body div to have a height.

UNLESS the parent element(s) have a height, calculated (using a percentage) or a fixed value, 'bottom' is undefined as the viewport extends to constrain its normal flow content.

 

[toolmania1]

Ok, so I see how just putting the items in the page without adjusting them with any offset or positioning just piles them on the page vertically in the order you put them in the code. Then, I can move an item with relative to put it maybe on top of something else. I think I did not understand this a long time ago ( obviously ). Also, IE would never play nice and would display my page all jacked up. So, instead of doing hacks, I learned the technique of using absolute positioning. It displayed my page nicely in all browsers and resolutions. I always had a container / wrapper div that I use to encompass the whole page. So, I was never putting them on the page with absolute positioning in relation to the default, but it was in relation to the one main div that everything went inside of. I think that is why it appeared to work for me.

So, with leaving the items fall where you put them and them moving them with relative, does this mean that my page will still look the same in every browser? Will this also cover the cases for mobile devices?

By the way, thanks for the help everyone. I wasn't trying to be a pain by stating the case for my 'absolute' use above either. I'm just trying to learn as always.

 

[chrishirst]

So, with leaving the items fall where you put them and them moving them with relative, does this mean that my page will still look the same in every browser? Will this also cover the cases for mobile devices?

Positioning is NOT what you think it is. NO positioning at all is what will make it work as intended.

 

[ronaldroe]

So, with leaving the items fall where you put them and them moving them with relative, does this mean that my page will still look the same in every browser? Will this also cover the cases for mobile devices?

As Chris pointed out, you really don't need relative positioning in most cases. Most times, the default will work and you can push elements around using margins. It's the best way to get cross-browser compatibility, leaves your code cleaner and uses the document flow to its maximum potential, which will reduce the amount of work you have to do. Also, it'll fix your footer woes.

Positioning is most useful for non-content page design elements. Admittedly, I say that, though I relatively position the major blocks of most of my designs. I have a very targeted reason for it though, which is part of my personal responsive design strategy, which I share with very few people.