The image basically shows what is happening. I have a wrapper of 1270px. Inside that wrapper (indicated by the vert line on the right) I have 4 divs and one table. The table contents is pushing past the page wrapper. THe page wrapper does not have a float as it is only to center the content on the page.I have tried the following but nothing works:\[code\]border: none;padding: 0px;border-collapse: collapse;overflow: hidden;table-layout: fixed;\[/code\]What is causing this? This is also allowing all the other content from the other 4 divs to push past the page wrapper as well.
EDIT:\[code\]<div id="wrap-page"> <div id="wrap-content"> <table id="content"> <tbody> <tr> <td id="featured"> <h1>h1</h1> <p>Lorem ipsum</p> <h2>h2</h2> <p>Lorem ipsum</p> </td> <td class="sidebar"> <p>Lorem ipsum</p> </td> </tr> </tbody> </table> </div> </div>html, body{ width:100%; margin:0; padding:0; background:#ccc; font-size:100%; line-height:1; font-family:Arial;}#wrap-page{ float:left; margin:auto; width:1270px;}#wrap-content{ margin:0 5px; border:1px solid;}#content{ position:relative; float:left; border-collapse:collapse; width:1270px; margin:7px 0;}#featured{ width:822px;}.sidebar{ width:193px; vertical-align:top;}\[/code\]