problema al maquetar un bloque de informacion

[rufus]

hola que tengo en una web un apartado de letras.

en el que a la izquierda aparece un cuadrado con sus 3 imagenes smalltop smallbody y smallbottom y dentro de este la lista con las canciones ("que al pulsar sobre ellas se te redirige a la cancion en cuestion para ver su letra")

pues necesito crear un segundo cuadro negro como el de arriba pero que se situe debajo de este no al lado , al mismo nivel pero a la derecha y no se como ponerlo debajo. os dejo el codigo para que lo entendais mejor...


style.css

Código CSS:

.black50{background: URL(images/black50.png);}
 
.smallBox,
.mediumBox,
.bigBox{margin-bottom:20px;}
 
.smallBox,
.smallBoxTop,
.smallBoxBottom {width: 300px;}
 
.smallBoxTop,
.smallBoxBottom{height: 5px;}
 
.smallBoxBody{padding: 15px;}
 
.smallBoxTop{background: URL(images/smallBoxTop.png)no-repeat;}
.smallBoxBottom{background: URL(images/smallBoxBottom.png)no-repeat;}
 
/*segundo smallbox para el segundo disco*/
.black502{background: URL(images/black50.png)}
.smallBox2,
.mediumBox,
.bigBox{margin-bottom:20px;}
 
.smallBox2,
.smallBoxTop2,
.smallBoxBottom2 {width: 300px;}
 
.smallBoxTop2,
.smallBoxBottom2{height: 5px; }
 
.smallBoxBody2{padding: 15px; }
 
.smallBoxTop2{background: URL(images/smallBoxTop.png)no-repeat;}
.smallBoxBottom2{ background: URL(images/smallBoxBottom.png)no-repeat;}
 
/*fin segundo smallbox para el segundo disco*/
 

letras.php

Código HTML:

<div class="tituloSeccion">Letras de canciones</div>
            
            <div class="smallBox floatLeft">
                <div class="smallBoxTop"></div>
                <div class="smallBoxBody black50">
                    <b>Selecciona cancion. Disco "Se busca banda"</b>
                    <ol>
                        <li><a href="#1">C&oacute;mo te lo montas</a></li>
                        <li><a href="#2">Tu y yo</a></li>
                        <li><a href="#3">La movida</a></li>
                        <li><a href="#4">Malos tiempos</a></li>
                        <li><a href="#5">Oye Juaqui</a></li>
                        <li><a href="#6">Inma y Estela</a></li>
                        <li><a href="#7">Es lo que hay</a></li>
                        <li><a href="#8">La sombra</a></li>
                        <li><a href="#9">Ostias hostiles</a></li>
                        <li><a href="#10">Un cl&aacute;sico</a></li>
                        <li><a href="#11">No puede ser</a></li>
                        <li><a href="#12">El T&uacute;nel</a></li>
                    </ol>
                    <div class="clear"></div>
                </div>
                <div class="smallBoxBottom"></div>
            </div>
            
            <div class="smallBox2 floatLeft">
                <div class="smallBoxTop2"></div>
                <div class="smallBoxBody2 black502">
                    <b>Selecciona cancion. Disco "La democracia ha muerto"</b>
                    <ol>
                        <li><a href="#1">Callejuelas</a></li>
                        <li><a href="#2">Contrabandista</a></li>
                        <li><a href="#3">Fundamentalismo</a></li>
                        <li><a href="#4">La cosa esta jodida</a></li>
                        <li><a href="#5">La moto</a></li>
                        <li><a href="#6">No me atrevo</a></li>
                        
                    </ol>
                    <div class="clear"></div>
                </div>
                <div class="smallBoxBottom2"></div>
            </div>