Problema con floats en IE 7

[Julcar]

Holas gente, verán, he realizado un diseño, testeado en los dos navegadores que uso (IE 8, Arora (webkit)) y todo bien, se me ocurrió llevarle el diseño base al cliente, y al mostrarle, él abre IE 7 y tengo un problema, se descuadra la parte medular de la pagina.

A continuacion, dejo el codigo:

Código:

<div id="wraper">
        <div class="sidebar">
          <h3 class="topper">Lorem Ipsum</h3>
          <div class="sidebox">
            <ul>
              <li><a href="#">Lorem Ipsum</a></li>
            </ul>
          </div>
          <h3 class="topper">Lorem Ipsum</h3>
          <div class="sidebox">
            <ul>
	      <li><a href="#">Lorem Ipsum</a></li>
            </ul>
          </div>
        </div>
        <div id="content">
          <h1>Lorem Ipsum</h1>
          <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
        </div>
      </div>

Código:

#wraper {
 margin-top:30px;
 width:100%;
 overflow:hidden;
 }

.sidebar {
 float:left;
 }

.sidebox {
 text-align:left;
 background:#fff;
 width:178px;
 border:solid #2A9DD3;
 border-width:0px 2px 2px 2px;
 margin-bottom:15px;
 }

#content {
 background:#fff url("../imagenes/fondo_content.PNG") no-repeat bottom right;
 width:584px;
 margin-left:30px;
 float:left;
 border:solid 2px #2A9DD3;
 }

Y por si acaso, pongo el css de las capas de las que hereda #wrapper:

Código:

* {
 padding:0;
 margin:0 auto;
 }

body {
 background:#fff url("../imagenes/fondo.png") repeat-x fixed;
 text-align:center;
 padding:10px 0px 10px 0px;
 font-family:Trebuchet MS, sans-serif;
 }

#global {
 width:800px;
 position:relative;
 margin:auto;
 margin-bottom:8px;
 overflow:hidden;
 }

Y como añadido, las imagenes de como deberia verse y cómo se ve en IE 7:

IE8 - Arora


IE7 - Vista de compatibilidad IE8