Height of one div moving another for unknown reason?

[bendlox]

I can't seem to figure this out. I have my web development portfolio setup at http://www.codeisdna.com. The site is 70% complete. I have a problem though. If you click on one of the projects, a div is expanded to reveal the full thing (a description on the left, a preview on the right in the form of a Macbook screen). On some of the other tabs the Macbook shifts. It happens when the description box has a certain height from the text. Can anyone aid me in finding the solution? I seem to have tried everything. I know the code is somewhat sloppy and it'll be cleaned up soon. The html code:\[code\]<div id="project_2" class="project_full psc"> <div class="wrapper"> <div class="proj_title"> <h3> Striking Code <a class="proj_link" href="http://stackoverflow.com/questions/14445861/#">Visit Site</a> </h3> </div> <div class="proj_details"> <div class="requirements"> <p>I felt that it was time to take my old portfolio (and internet identity) and reinvent it into something more clean -- something that more accurately represented my views on development today.</p> </div> <div class="overview"> <p>I cleaned up the design (or, well, built a new one), created a new identity, and launched what's now known as code is dna.</p> </div> <div class="services"> <ul> <li>UI / UX Design</li> <li>Web Development</li> </ul> </div> </div> <div class="proj_preview pull_left"> <a class="proj_enlarge" id="single_1" href="http://stackoverflow.com/questions/14445861/img.jpg">Click to See More</a> </div> </div></div>\[/code\]The CSS (.proj_preview is the Mac, .proj_details is the description):\[code\].project_full {display: none; margin-top: 20px; width: 100%; max-height: 450px; padding: 20px 0px; text-align: center; background: url(../img/code.jpg) top center no-repeat fixed #293134; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); color: #fff; overflow: hidden;}.project_full .proj_title {width: 390px;}.project_full .proj_title h3 {font: 32px/40px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif; font-weight: bold; margin-top: 20px; margin-bottom: 20px; display: inline-block; padding: 5px 10px; background: url(../img/project_expanded_content_bg.png) repeat;}.project_full .proj_title a.proj_link {display: inline-block; width: 27px; line-height: 40px; text-indent: -9999px; margin-left: 10px; background: url(../img/project_link.png) 2px 10px no-repeat;}.project_full .proj_details {width: 370px; padding: 10px; min-height: 250px; background: url(../img/project_expanded_content_bg.png) repeat; margin-bottom: 20px;}.project_full .proj_details .requirements {font: 16px/22px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif; font-weight: bold; margin-top: 15px;}.project_full .proj_details .overview {margin-top: 20px; font: 14px/22px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif;}.project_full .proj_details .services {margin-top: 25px; font: 12px/18px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif;}.project_full .proj_details .services ul li {list-style-type: none; display: inline-block; letter-spacing: 0px; margin-right: 10px; background: #181818; padding: 3px 10px; border-radius: 100px; cursor: pointer;}.project_full .proj_details .services ul li:hover {background: #499dcf;}.project_full .proj_preview {width: 773px; height: 500px; position: relative; right: -420px; bottom: 370px;}.project_full .proj_preview a.proj_enlarge {display: block; width: 100%; height: 100%; text-indent: -9999px; background: url(../img/project_enlarge.png) 45% 40% no-repeat;}.project_full .proj_preview a.proj_enlarge:hover {background: url(../img/project_enlarge_hover.png) 45% 40% no-repeat;}\[/code\]