Container border stops halfway down and image alignment

HTML & CSS
1

This is the website that I am designing for a Preschool:

Burlington, VT | International Children’s School

The container border stops about halfway down. Someone said it is because I have the next section floated to the left and adding a div with ‘clear all’ would work. Is this the best solution and where would I put the div?

Also, the picture at the top is a background image and is aligned to the left. Can I just add a center class to the div to get it to to align to the center?

Thanks

2

It’s better to fix a CSS issue with CSS rather than HTML, so the best way to make the container stretch all the way to the bottom (or to wrap around its content) is to add this to your CSS:

#maincontent {
  border-color: #CCE5B3;
  border-style: none solid;
  border-width: 1px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding-bottom: 20px;
  text-align: left;
  width: 968px;
  [COLOR="Red"]overflow: hidden;[/COLOR]
}

To center the header image, you’d do this:

#bg {
  background-color: #C5F9FE;
  background-image: url("../images/mountains1.jpg");
  [COLOR="Red"]background-position: 50% 0;[/COLOR]
  background-repeat: no-repeat;
  height: 458px;
  margin: 0 auto;
  width: 100%;
}

BUT, be aware that having all that header information in an image alone is a really bad idea. Heading information like that is very important—for search engines, non-sighted users, SEO etc. Having it all in a image makes it totally inaccessible, and will serious hurt the site’s performance.

One way around this is to place all that info in the HTML and place the decorative image over the top of that text. But a better solution is to remove any text from the background image and place that text in the HTML itself, using a fancy font if you need to.

3

Not sure if you spotted this Ralph, but the border is applied to both #container and #maincontent, so the fix results in a 2px border in some areas. The borders can be removed from one or the other. If they should encompass the menu then remove them from #maincontent and apply overflow:hidden to #container. And vice versa if not needed around the menu.

Sound advice re the image and headers. With CSS off, the page content begins with the nav and an h1 from the slideshow reading “Persistance”. Needs relevant text content. No doubt others will have suggestions (and thoughts on XHTML 1.1)…