The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS tableless design question.

I am working with a free template I downloaded and I am customizing it for a local church and once completed it will be their main church web site. It is a tableless design and I am having one problem I can't seem to find a solution for. This is the problem.......the index page for example has a certain amount of text in the main area and that makes the page so many pixels long. No problem there........but........the history page is a very long page with much more text and for some reason the fact that that page is so long forces every other page on the web site to be that long as well. The "pastor" page for example is very short.......but the page is incredible long as it mimics the "history" page. I am wondering how to get these blocks of text to be the correct size per page rather then having that loooooooong page throughout the entire web site.

Any help would be appreciated here. *note*: I am not an expert web developer by any stretch of the imagination.....but.....I can get along OK and am willing to put in the time to get this right.

Here is the link to the site (it's no where near finished as far as text and some link don't work yet):

Wow Centauri....I have been looking high and low for a solution. Your suggestions were a HUGE step forward. The footer is still a problem. Plus the heading for each page are off to the left too much in Internet Explorer.

I am extremely grateful for your assistance on this. You're the first person who could help me....and believe me I have been asking and searching.

Holy Wow Centauri.......you did it! I am profoundly grateful to you for this. You have the distinction of being the only one on the net who had the answer. I salute you.

A couple of questions if I may be so bold. In your estimation......how "bad" is the css code on this template? If it is that lousy.....can it and should it be cleaned up? Also......will a tableless site like this work in older browsers?

Ahh, I missed a colon. However, as I put side padding on the #bodyPan, the margin is not needed (and neither is the inline display, which was for the benefit of IE6), so that line of css can be reduced to :

Using css is all about styling content, and divs should only be used to logically group blocks of content. If there is only one element inside a div, then in a lot of cases the div itself could be removed and the styling applied direct to the particular element. Sometimes extra non-semantic divs have to be inserted due to the particular graphic styling required, but their use should be minimised. Your layout could probably be reworked to reduce the number of divs substantially, but may not be worth the effort - as the layout does not use tables, it is quite accessible and makes semantic sense, and a few extra divs are not going to affect that. One of the biggest problems was the excessive use of absolute positioning, but we got rid of most of that during the course of this thread.

Graeme, you have no idea how much this has helped me. I extend to you a heartfelt thank you. Things are looking really nice now with the site and it validates in w3c which is another thing that makes me happy.

This is my first experience with SitePoint. To say that I am impressed would be an understatement.