PDA

View Full Version : Extendending Main Content Section of a Web Page


Crumpy1
04-24-2012, 12:29 PM
Hi All,

I am looking to extend the main content section of my website to match the side of my sidebar to i do not have a section of background before the footer. Here is an example http://hfcc.0catch.com/testomonials.html.

The main content section stops and then there is a gap then the footer.

How do i extend the main content to always match the length of the sidebar on pages where the content is not a long as it?

Hope that made sense.

Thanks

Corrosive
04-25-2012, 08:37 AM
You can't actually make it expand to the same length because divs expand to fit content. However you can use the faux column method; http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Corrosive
04-25-2012, 08:37 AM
BTW, your website is painfully slow to load.

Crumpy1
04-25-2012, 08:58 AM
BTW, your website is painfully slow to load.

Thanks for the help, i will look at this tonight when i get home.

The website is slow because its a free server with tones of pop-ups etc and they have restricted bandwidth for free users. I only use it to show people my site when i need a bit of help.

Thanks

Corrosive
04-25-2012, 10:49 AM
Oh right, that explains it then :)

Crumpy1
05-09-2012, 07:17 AM
Thanks alot for all the help, it works perfectly and looks more finished.

Crumpy1
05-09-2012, 05:40 PM
I have just run into an error upon testing this in a browser. In design mode the site looks as i want iot to with the faux column effect in place. However when i run it in safari or internet explorer the background completly disappears.

I have put a div around the area that i want this to affect.

Any ideas?

Corrosive
05-09-2012, 06:02 PM
It is because your columns are floated so you need to 'clear' them to make your wrapper stretch down.Try adding

overflow: hidden;

to the CSS for your containing div with the background :)

Crumpy1
05-23-2012, 09:32 AM
It is because your columns are floated so you need to 'clear' them to make your wrapper stretch down.Try adding

overflow: hidden;

to the CSS for your containing div with the background :)

Thank you for the help, it is now working properly.

Thanks m8 for all the help!

Corrosive
05-23-2012, 09:49 AM
Thanks m8 for all the help!

You are welcome as always.