Question

I tried creating 3 divs to add a top & bottom border image to my mainContent div, but I could not make it align. Is there a simple way to modify this code to add this blue border at the top & bottom of the main white section?

http://www.charissasantos.la/mezcaleria.html

Image of desired border effect here:
http://www.charissasantos.la/img/shot.png

Answer 1

In addition to these answers, you could also apply the same background to both your #footer and #mainContent selectors.

For instance;

#footer {
  background-image: url(img/img-blue-border.png);
  background-color: #C39C5B;
  background-repeat: repeat-x;
  background-position: top;
  text-align: left;
  font-size: 11px;
  padding: 15px 0;
}
#mainContent {
  margin-top: 15px;
  padding-bottom: 20px;
  background-image: url(img/img-blue-border.png);
  background-color: #fff;
  background-position: top;
  background-repeat: repeat-x;
}

Working example here.