float footer below main content

[buntrosgali]

I have created a site made of divs, but i forgot to create a div footer untill now, i have created the div but i want the positioning of the div to be in accordance with the length of the page its on.

for instance check out this page link

as you can see the footer is set currently at top:800; and because this page is much longer than that it is actually placed over the text.

i want to edit the code so that the footer will always go at the bottom of the page no matter how long the main content secition is.

any code helP?

footer code is

div#footer {
position:absolute;
left:11px;
top: 800px;

width:864px;
height:138px;
z-index:8;
background-color: #FF0000;
layer-background-color: #FF0000;
border: 1px none #000000;




main content code is

div#content {
position:absolute;
left:196px;
top:265px;
width:667px;
height:auotpx;
z-index:3;
background-color: #ffffff;
layer-background-color: #002A4C;
border: 1px none #000000;
min-height: 650px; /* IE wont understand these, so we will use javascript magick */
 

[oct4th]

position:relative; instead of absolute?

[Dr.CSS]

Your problem is that you are using position:absolute all over the place on divs that just don't need it, it's only for the rare occasions where the natural flow of the template must be interrupted or something...

Except for when you need to float items they follow them selves in the order they are in the template/page, headers will be on top, then breadcrumbs, then a div to hold the 2 floats and center content, then the prev./next links div, and finally footer...

So in this case you just have to mess with floating the left and right and all else will fall in place...

Should have just hired me to do this and it would have been done long time ago, I'm cheap and ez and good...

[buntrosgali]

would be simpler to pay someone to do it, but im want to learn how to do it myself and im getting there

i watched a tutorial on youtube showing how to create a website in dreamweaver with divs and it said to use the position absolute thats why i have them there.

i have messed about this morning removing the absolute and trying floating each div but they were lining up ontop of each other as oppossed to falling into shape like i want it. i have reverted back to the code i had untill i get further advice from you nice ppl

would if help if i showed all the code for the stylesheet?

[Dr.CSS]

I use Firefox with Web Dev. extension so I see all CSS, dreamdeceiver is for ones who don't want to learn clean code, I started with notepad/hand coding and never did tables, DW just started doing div instead of tables in the last couple of years so maybe it don't know so good...

OK free lesson...

Put in this order...

main div, inside it, header div, then content div with breadcrumb/search div and right div left div then main/center div and prev./next div, then footer div...

You may want to go to themes site and get wireframe 3 col. template to study, which would work for what you are doing...

http://themes.cmsmadesimple.org/Theme_Frameworks.html

[pixelita]

One of the most common layouts is a wrapper division*, then a masthead, possibly a menu bar but that's optional.  Then you  have floated sidebar and main content area. 

Then the footer at the bottom.  The trick about that is in order for the footer division to lay properly, you have to clear those floated sidebar and content divisions.  You do this by adding a clearing division right before the footer and after the last floated division (whether it's the sidebar or content):

In your stylesheet:

Code: Select all

.clearer {
     margin: 0;
     padding: 0;
     clear: both;
}

In your template:

Code: Select all

</div> [last floated division]
<div class="clearer"></div>
<div id="footer> ...

* Use the wrapper division to control the positioning and width of the entire layout.

Also some more advice about web design tools. Since you sprang for the costly Dreamweaver, $80USD should be a drop in the bucket, but I promise you, it's the best $80 you'll ever spend.  Get TopStyle Pro  by Bradsoft.
http://www.newsgator.com/Individuals/To ... fault.aspx

Use it to create your stylesheets. 

And I use EditPlus2 for HTML and PHP editing.
http://www.editplus.com/


HTH

[christiaans]

One of the most common layouts is a wrapper division*, then a masthead, possibly a menu bar but that's optional.  Then you  have floated sidebar and main content area. 

Then the footer at the bottom.  The trick about that is in order for the footer division to lay properly, you have to clear those floated sidebar and content divisions.  You do this by adding a clearing division right before the footer and after the last floated division (whether it's the sidebar or content):

In your stylesheet:

Code: Select all

.clearer {
     margin: 0;
     padding: 0;
     clear: both;
}

In your template:

Code: Select all

</div> [last floated division]
<div class="clearer"></div>
<div id="footer> ...

* Use the wrapper division to control the positioning and width of the entire layout.

Also some more advice about web design tools. Since you sprang for the costly Dreamweaver, $80USD should be a drop in the bucket, but I promise you, it's the best $80 you'll ever spend.  Get TopStyle Pro  by Bradsoft.
http://www.newsgator.com/Individuals/To ... fault.aspx

Use it to create your stylesheets. 

And I use EditPlus2 for HTML and PHP editing.
http://www.editplus.com/


HTH

I prefer the clearfix to be honest. Clears everything properly, in every browser.

[pixelita]

Interesting! I'll have to give that a try. Thanks, Chris!  Isn't this forum great? I never come here without learning SOMETHING!

[christiaans]

That's what we are here for