Hola:
No sé si esto es lo que quieres pero se descalabra menos, este es tu CSS modificado
Código:
* { /* Añadir selector Universal */
padding:0;
margin: 0 auto;
}
body {
color:#A6A292;
background-color:#312E1D;
}
img{
border: none;
}
#contenedor{
margin:1em;
/*width: auto;*/ /* Quitar */
width:770px; /* Dar un ancho concreto */
}
#inireg{
background:url(../images/up.jpg) top left no-repeat;
height:49px;
color:#787465;
font-family:Tahoma,Arial;
font-size:9px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#inireg a {
-x-system-font:none;
background:transparent url(../images/under.gif) repeat-x scroll left bottom;
color:#BD9959;
font-family:Tahoma,Arial;
font-size:9px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
padding:0;
text-decoration:none;
}
#inireg a:hover {
text-decoration:none;
}
#menu{
height: auto;
background-repeat: no-repeat;
background-position: right top;
}
#menu ul{
position: absolute;
/*top: 10.9em;*/ /* Cambiar Este */
top:12.25em; /* Por Este */
left:2.5em; /* Añadir */
}
#menu ul li{
background: url(../images/0m6.jpg);
position: relative;
display: inline;
padding:0.7em;
}
#menu ul li a{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover{
text-decoration: underline;
}
#contenido{
height:auto;
width:auto;
background-image: url(../images/main_bg.jpg);
background-repeat: no-repeat; /* Cambiar repeat-x por no-repeat */
}
#division1{
background:url(../images/0gl1.jpg);
width:auto;
}
#division2{
/*width:auto;*/ /* Cambiar Esto */
width:99%; /* Por Esto */
background-image: url(../images/division2ce.png);
background-repeat: repeat-x;
overflow:auto; /* Añadir */
}
#bloqueiz{
margin: 0.5em;
float:left;
width:30em; /* Cambiar 31em por 30em*/
}
.titulo{
padding:0.3em;
background:url(../images/0t3.jpg);
width:12em;
height:22px;
}
.contenido{
margin:1em;
padding:0.3em;
}
#bloque1{
width:30em;
height:auto;
}
#bloque2{
width:14em; /* Cambiar 15em por 14em */
height:auto;
float:left;
margin:0.1em; /* Añadir */
}
#bloque3{
width:14em; /* Cambiar 13em por 14em */
height:auto;
float:right;
margin:0.1em;
}
#bloquede{
margin: 0.5em;
float: right;
width: 13em;
/*margin-right:4em;*/ /* Quitar */
}
#bloque4{
/*width:12em;*/ /* Cambiar Esto */
width:12.7em; /* Cambiar Esto */
height:auto;
padding:0.3em;
background-attachment:scroll;
background-color:transparent;
background-image:url(../images/cbg_btm1.jpg);
background-position:left bottom;
background-repeat:repeat-y;
}
#bloque5{
/*width:12em;*/ /* Cambiar Esto */
width:12.7em; /* Por Esto */
height:auto;
padding:0.3em;
background-attachment:scroll;
background-color:transparent;
background-image:url(../images/cbg_btm1.jpg);
background-position:left bottom;
background-repeat:repeat-y; /* Cambiar no-repeat por repeat-y */
}
#pie{
position: relative;
margin: 0em 5.2em 0em 0.2em;
height: 53px;
width:100%;
clear: both;
text-align:center;
}
#pie a:hover {
text-decoration:underline;
}
#pie a {
-x-system-font:none;
color:#BD9959;
font-family:Tahoma,Arial;
font-size:9px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
text-decoration:none;
}
#pieinfo{
position:absolute;
/*margin: 0em 5.2em 0em 0.2em;*/ /* Cambiar Este */
margin: 0em 5.2em 0em 25px; /* Por Este */
/*right:3em;*/ /* Quitar */
height: 53px;
/*width:100%;*/ /* Cambiar Este */
width:95%; /* Por Este */
clear: both;
text-align:center;
background-image: url(../images/piece.png);
background-repeat: repeat-x;
}
.right{
position:absolute;
right:0em;
}
y en el HTML cambia lo siguiente.
Código:
<div id="contenido">
<!-- <div style="text-align:center"> -->
<img src="images/0bnr1.jpg" alt="" />
<img src="images/0bnr2.jpg" alt="" />
<img src="images/0bnr3.jpg" alt="" />
<!-- </div> -->
Ahora revísalo y adáptalo a tus necesidades.
Saludos.