Extend a border

[nloding]

Alright, here's the problem I'm faced with:

I'm designing a website based of a jpeg graphic the company provided me.  There is a menu column on the left (150px), with the main body being the right (700px).  Both these are inside a main wrapper div.  The main body is it's own div, and each section inside has it's own div (i.e., Mission Statement, News, Events).  Each section needs to have a 1px "border" dividing it from the section previous.  Here's my existing code:

[code]body {
  background: #fff;
  font: normal 62.5% "Palatino Linotype","Times New Roman",serif;
  color: #000;
}

#wrapper {
  position: relative;
  width: 850px;
  padding: 5px 5px 5px 5px;
  background: #fff;
  /*border: 1px solid #09507e;*/
  text-align: center;
  z-index: 1;
}

#main-body {
  text-align: left;
  margin: 0 0 0 150px;
  padding: 0 0 0 10px;
  border: 1px solid #09507e;
  border-right: 0;
}

#mission-statement p {
  font-size: 1.3em;
}

#events {
  border-top: 1px solid #09507e;
  clear: right;
}

#news {
  border-top: 1px solid #09507e;
}[/code]

Therefore, the main body div has a top, left, and bottom border, and that works SWEET.  Exactly what they wanted.  Then the News and Events divs have a 1px border at the top ... Now to the problem:

The border-top of News and Events doesn't extend all the way to the left border of the main body div.  The company execs ABSOLUTELY have to have those connect.  There is currently a 3-5px space between the left border and the top border of the sub-divs.  I assume this is from the padding.

What's the best to way to "extend" that border so that they connect?  I'm trying to avoid using an image for the border.  I've also attached two images to show exactly what they want, and what I've got.

THANKS!

--Nathan



[attachment deleted by admin]

[attachment deleted by admin]

[ToonMariner]

First off - if you are designing a fixed width site design to less than 800px (I use 765px); There are STILL millions using 800 x 600 screens resolution....

The reason that the borders do not touch is that you have used padding on the main body div that contains all these 'sub divs'

#main-body {
  text-align: left;
  margin: 0 0 0 150px;
  padding: 0;
  border: 1px solid #09507e;
  border-right: 0;
}

#main-body div {
  text-align: left;
  margin 0;
  padding 10px;
  border: 1px solid #09507e;
}

try that

[nloding]

Duh!

That worked!  THANK YOU!