mafiarocksyeah
New Member
I'm currently building my portfolio website. 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 which has helped me get very 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:\[code\]<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>\[/code\]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 so the border appears continuous which is what they currently 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:\[code\].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;}\[/code\]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 in Firefox? It looks perfect in Safari and Chrome. Any help and advice would be a life saver.JSFiddle of code above