Padding breaks my floated layout

1

This is driving me nuts…I’ve got a 2 column floated layout that is surrounded by borders. The site looks fine and is nice and centered when my main content div (named “#content”) has no padding, but then as soon as i add a 35 pixel buffer around the edges (which is in the “#content” tag in the css file) it throws the whole layout out of whack. The right side border bar gets pushed over by the amount of the padding it seems.

here’s the url: http://www.studio56lofts.com/staging/

anybody have a fix, or am I just totally doing something wrong?

thanks!

here’s the HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="description" content="Create Your Own Masterpiece - 56 Limited Edition Lofts at Town Center in Virginia Beach.  Initially priced from the high 200's."/>
    <meta name="revisit-after" content="31 days"/>
    <meta name="keywords" content="studio 56, studio56, lofts, studio 56 lofts, studio56 lofts, condominiums, lofts condominiums, virginia beach, virginia, beach, lofts, town center, granby tower, armada hoffler, rose, womble, performing arts center, westin residences"/>
    <title>Studio 56 Lofts - Create Your Own Masterpiece</title>
    <link rel="stylesheet" href="studio56.css" type="text/css"/>
    <link rel="shortcut icon" href="favicon/studio56.ico"/>
    <link rel="icon" type="image/ico" href="favicon/studio56.ico"/>
</head>

<body>
<div id="container" class="clearfix">
    <div id="frameTop"></div>
    <div id="frameLeft"></div>

    <div id="flashframe"><img src="images/studio56_navigation.jpg" /></div>
    <div id="content">

        <img src="images/testImage.jpg" />
        <p>Studio 56 is a very unique loft project and the most important feature - it's location!  Offering an urban lifestyle combined with a sense of community, Studio 56 is a stunning, five-story collection of one-level lofts located in the heart of Town Center in Virginia Beach near great shopping, fun nightlife, and the nation's best restaurants.</p>
        <p>Studio 56 is five stories tall with 56 contemporary lofts on four floors arranged in a unique configuration.  With retail shops on its ground floor, second floor residences with balconies, and a roof-top deck , it will not only be very convenient but quite secure, which will make living here a real pleasure.</p>

    </div>

    <div id="frameRight"></div>
    <div id="frameBottom"></div>
</div>

</body>
</html>

here’s the CSS:


html, body {    
  height: 100%;
  margin: 0px; padding: 0px;
  background-color: #181818;
  font-family: sans-serif;
  font-size: 10px;    
  color: #FFFFFF;
  text-align: center;
}

a {
  color: #CBC5BE;
  text-decoration: none;
}

img {
  border-style: none;
}

form {
  margin: 0px;
  padding: 0px;
}

#container { 
  position: absolute;
  left: 50%;
  top: 2%;  
  margin-left: -496px; /* Half the width of the DIV tag which is 26 + 940 + 26 pixels */
  text-align: left;
}

#frameTop {
  width: 993px;
  height: 26px; 
  background-image: url(images/studio56_top.jpg);
  background-repeat: no-repeat;
  background-position: top left;
}

#frameLeft {
  float: left;
  width: 26px;
  height: 896px; 
  background-image: url(images/studio56_left.jpg);
  background-repeat: no-repeat;
  background-position: top left;
}

#frameRight {
  float: left;
  width: 26px;  
  height: 896px; 
  margin-right: -336px;
  background-image: url(images/studio56_right.jpg);
  background-repeat: no-repeat;
  background-position: top left;
}

#frameBottom {
  float: left;
  width: 992px;
  height: 27px;
  background-image: url(images/studio56_bottom.jpg);
  background-repeat: no-repeat;
  background-position: top left;
}

#content {
  float: left;
  width: 713px;
  height: 896px;
  padding: 35px;
  color: #000000;
  background-image: url(images/studio56_content.jpg);
  background-repeat: no-repeat;
  background-position: top left;
}

#content p {
  width: 643px;
}

#flashframe {
  float: left;
  width: 227px;
  height: 896px;
}

.header {
  margin-top: 0px;
  margin-bottom: 6px;
  text-align: center;
}

.descriptionHeader {
  background-color: #CE7018;
  font-family: sans-serif;
  font-size: 21px;
  color: #FFFFFF;
  text-align: center;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */