Making divs expand to the height of the highest div

Question

I'm currently building my portfolio website. I'm not a coder and find it difficult so I really need simple answers if possible please. The page I'm working on can be found here: http://www.infomaticfilms.com/jack/jrimg/g_and_d.htm. It's far from finished as I don't want to move on until I fix this problem. This page will be a generic page for all the various project pages which means they will all have different heights. Rather than make individual pages for each project I'd like to make just one that I can use for all by merely deleting the content each time and re-saving the page. If you click on the Me or Contact link you can see the other pages to see the border. I read an article from Stack Overflow and I'm very close to the solution. I have a problem with Firefox though which adds 1 pixel to the right hand border. Here's the HTML:
<div class="contentAndBorders">
  <div class="borderLeft"></div>
  <div class="mainContentProjectPage">
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
  </div>
  <div class="borderRight"></div>
</div>
I'm looking to put the content into the div with the class of mainContentProjectPage. I need the divs with the classes of borderLeft and borderRight to expand with the height of mainContentProjectPage which is what they do. It's basically three columns. The first and third columns are the white borders to the left and right and the middle column is for the content. Here's the CSS:
.contentAndBorders {
          width: 950px;
          position: relative;
          overflow: hidden;
.mainContentProjectPage {
          float: left;
          background-color: #F55816;
          width: 100%;
          padding-left: 24px;
.borderLeft {
          float: left;
          background-color: #FFF;
          width: 1.3%;
          background-attachment: scroll;
          background-image: none;
          background-repeat: repeat;
          background-position: 0px 0px;
          position: absolute;
          left: 0px;
          height: 100%;
          margin: 0;
.borderRight {
          background-attachment: scroll;
          background-color: #FFF;
          background-image: none;
          background-repeat: repeat;
          background-position: 0px 0px;
          width: 1.3%;
          float: left;
          position: absolute;
          right: 0px;
          height: 100%;
          margin: 0;
I don't really understand how it works, just that it does. If anyone knows a better way of achieving the same result then I'd be very grateful as this is the final part of my site. My question is does anyone know how to get rid of the extra 1 pixel on the right hand border? It looks perfect in Safari and Chrome. Any help and advice would be a life saver.
Thanks
Jack

Answer 1

I'm not a coder and find it difficult so I really need simple answers if possible please.
You need to understand HTML & CSS code.  If you don't take time to learn the basics, you will continue to be frustrated by the process, your results and by our answers to your questions.
PART 1
Height is determined by page content.  The more content a page contains, the longer the page is.  All sites contain both long and short pages.  So keep your design flexible.  Don't paint yourself into a rigid box.
The CSS height property should never be used on containers that hold text as this will vary from user to user depending on their device and browser settings.  Remove height values from your CSS code.  If needed to reveal a background-image, for example, use the min-height: property.
PART 2
All browsers add default margins and padding (spaces) to every html element.  If you want to shore up the spaces between elements, apply margin:0; padding:0 to all elements or incorporate a CSS Reset method into your site.  http://cssresetr.com/
Finally, when you need a plumber, hire a plumber.  Building web sites looks easy but it's not.   This site will be the first impression many people have of you and your body of work.  You don't get 2nd chances at 1st impressions.  So put your best foot forward. Hire an experienced web designer to help you or take some time off to learn everything you need to learn to do it right.
Best of luck,
Nancy O.