Te dejo el código de como lo haría yo. Opciones hay muchas y quizá no es la mejor, pero prueba a ver cual te sirve para lo que quieres hacer. Primero el código con los DIV:
Código HTML:
<body class="thrColLiqHdr">
<div id="container">
<div id="header">
<h1>Encabezado</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 </h3>
<p> </p>
<!-- end #sidebar1 --></div>
<div id="topContent">
<div id="sidebar3">
<!-- end #sidebar3 --></div>
<div id="sidebar4">
<!-- end #sidebar4 --></div>
<!-- end #topContent --></div>
<div id="sidebar2">
<h3>Sidebar2 </h3>
<p> </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Contenido principal </h1>
<p> </p>
<!-- end #mainContent --></div>
<!-- Este elemento de eliminación siempre debe ir inmediatamente después del div #mainContent para forzar al div #container a que contenga todos los elementos flotantes hijos --><br class="clearfloat" />
<div id="footer">
<p>FOOTER</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html> Y los estilos CSS:
Código:
#mainContent {
float:right;
width: /*Aquí el ancho en porcentaje de lo que debe ocupar sidebar3 + sidebar4*/
}
#sidebar3 {
float:left;
width: /*Ancho*/
}
#sidebar4 {
float:right;
width: /*Ancho*/
}
En principio con esto deberías tener suficiente para añadir el espacio que necesitas para sidebar3 y sidebar4. Si no se muestra como quieres pon una captura de pantalla para ver como queda ya que no he probado el código.