I would like the main content area of my site to auto adjust when i update the content without overlapping my footer.

 

I tried the following:

 

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<div id="main"><div id="twitter"><script>
new TWTR.Widget({
 version: 2,
 type: 'profile',
 rpp: 4,
 interval: 6000,
 width: 200,
 height: 300,
 theme: {
   shell: {
     background: '#333333',
     color: '#ffffff'
   },
   tweets: {
     background: '#cbda29',
     color: '#000000',
     links: '#000000'
   }
 },
 features: {
   scrollbar: false,
   loop: false,
   live: false,
   hashtags: true,
   timestamp: true,
   avatars: false,
   behavior: 'all'
 }
}).render().setUser('imjHeg').start();
</script></div></div>

 

#main{
width:1000px;
height: auto;
margin: 0 auto;	
}
#twitter{
float:right;
margin-top:1px;

}

 

However the twitter module thing still runs past the footer. I'm sure it must be something simple but i'm struggling to see it.

Right I think i have fixed it. The footer and botnav wrapper had position:absolute; and when I removed that it seemed to work!

Hi jheg,

 

Absolute positioning removes the affected div from the flow of the page and it appears exactly where you place it. With this and fixed positioning the div is no longer 'inline' with the rest of the document and because of this, it is not affected by other elements on the page and also does not affect other elements on the page - because of this it's position was not moving as you wanted it to because the other divs had no affect on it. By removing the position:absolute declaration you changed the position to relative (as this is the default). With relative positioning the div is 'inline' with the rest of the document and so will be affected when other divs change position/size.

Thanks HC. I thought I'd fixed it but hadn't. I have sort of got round it I think by adding margin-bottom: to the div in my content area but it's prob not correct. Does this mean I shouldn't use absolute positioning on a footer? The reason I had it was because it seems to make the page more tidy regardless of monitor size by always placing the footer content smack bang at the bottom. Once I fill the content area with content I will run off the bottom of the page anyway but it was just bugging me a bit that I couldn't always keep it at the bottom even if there wasn't enough content to put it down there if you know what I mean?

Try this Sticky footer

Hi jheg,

 

I haven't tried sticky footer so go ahead and give that a go if you like, otherwise it's very straightforward. In this situation I would set the div containing the footer to position:fixed and bottom:0. This way the footer will always stay at the base of the page. However, bear in mind that it will be there even if the content on the page is longer than the height of the window, if this is the case, then the page content will appear in the same area as the footer. If you want the footer to either appear at the base of the page, or below the content, whichever is lower, then you will have to use some simple javascript.

Hi jheg,

 

This way the footer will always stay at the base of the page. However, bear in mind that it will be there even if the content on the page is longer than the height of the window, if this is the case, then the page content will appear in the same area as the footer. If you want the footer to either appear at the base of the page, or below the content, whichever is lower, then you will have to use some simple javascript.

 

That's what I feared and I know nothing of javascript yet as haven't begun to tackle it. Is it as easy to pick up as HTML & CSS or a bit more difficult?

 

Try this Sticky footer

 

Thanks once again mteam this looks like just what I was after.

Javascript is a very versatile language which can be used to do many things, but it does take some time to learn. In terms of complexity, yes it is certainly significantly more complex to code than HTML and CSS, but in my opinion, it's well worth the time spent learning because of the vast amount of extra functionality you gain for your page. Something like your footer issue could be coded in around 15 lines I would say, so if you wanted to learn it then that would be a great little project to get going with (even examine the code for sticky footer and try and work out whats going on if you like).

(even examine the code for sticky footer and try and work out whats going on if you like).

 

When you say examine the code is there javascript in it? or do you mean examine the css/html?

Well without actually looking at it, I would expect that sticky footer requires you to include a .js file on the page you want it, its this .js file I was suggesting you could examine to see how the javascript inside works

I think it's pure HTML & css

I've just had a look at it, and yes it is just CSS utilising the min-height property. It looks like a decent solution although the min height property does not take into account padding, borders or margin so it's not foolproof.

 

No JS to look at their then!