CSS template - make div's move down rather than overlap

TWM · 11-08-2009, 12:11 PM

When the center content area has too much text, it overlaps the footer and continues down the page. I would like to have it push the footer down and expand the two div's on the bottom left and bottom right.

Index page code index | Copy Paste Code

stylesheet: css | Copy Paste Code

Thank you very much! First full CSS template

EDIT:
Reading more on this, i think that absolute positioning might be messing everything up. And i shouldn't be using it anyways?

adamo · 11-08-2009, 01:16 PM

Try changing instead top:1112px; bottom:0;

TWM · 11-08-2009, 03:28 PM

That would translate to the bottom of the browser window... so if the page runs longer than the browser window shows (below the fold) then the footer would be in the middle of the website.

adamo · 11-09-2009, 01:02 AM

I think you need to look up floats. or in newer browsers display:table-cell and display:table;

What I see here is a standard 3 column layout (faux columns). But you need to be more specific what are you trying to achieve. From the template I guess you would have something like this here 3 Column CSS Layout - Fixed Header and Footer
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.

Mr Spy · 11-09-2009, 10:41 PM

Probably best to steer clear away from absolute positioning unless you really have to. As adamo says, perhaps look up the theory of floats (is a lot more complex than most people think), but once you can grasp that - you'll be on the money

11-08-2009, 12:11 PM	THREAD STARTER #1 (permalink)
TWM Web Marketing Specialist Join Date: Oct 2003 Location: Texas, USA Posts: 1,335	CSS template - make div's move down rather than overlap When the center content area has too much text, it overlaps the footer and continues down the page. I would like to have it push the footer down and expand the two div's on the bottom left and bottom right. Index page code index \| Copy Paste Code stylesheet: css \| Copy Paste Code Thank you very much! First full CSS template EDIT: Reading more on this, i think that absolute positioning might be messing everything up. And i shouldn't be using it anyways? __________________ TargetedWebMarketing.com : Web Marketing Plans - Search Engine Optimization - Online Promotion coraltanks.com l Corporate Quarters Last edited by TWM; 11-08-2009 at 12:18 PM.

11-08-2009, 01:16 PM	#2 (permalink)
adamo NamePros Member Join Date: Aug 2008 Location: poland Posts: 94 Follow @depcore	Try changing instead top:1112px; bottom:0; __________________ web design/development

11-08-2009, 03:28 PM	THREAD STARTER #3 (permalink)
TWM Web Marketing Specialist Join Date: Oct 2003 Location: Texas, USA Posts: 1,335	That would translate to the bottom of the browser window... so if the page runs longer than the browser window shows (below the fold) then the footer would be in the middle of the website. __________________ TargetedWebMarketing.com : Web Marketing Plans - Search Engine Optimization - Online Promotion coraltanks.com l Corporate Quarters

11-09-2009, 01:02 AM	#4 (permalink)
adamo NamePros Member Join Date: Aug 2008 Location: poland Posts: 94 Follow @depcore	I think you need to look up floats. or in newer browsers display:table-cell and display:table; What I see here is a standard 3 column layout (faux columns). But you need to be more specific what are you trying to achieve. From the template I guess you would have something like this here 3 Column CSS Layout - Fixed Header and Footer The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. __________________ web design/development

11-09-2009, 10:41 PM	#5 (permalink)
Mr Spy NamePros Member Join Date: Nov 2009 Location: Christchurch, New Zealand Posts: 27 Follow @mindtyrant	Probably best to steer clear away from absolute positioning unless you really have to. As adamo says, perhaps look up the theory of floats (is a lot more complex than most people think), but once you can grasp that - you'll be on the money

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)