galería de imágenes en varias lineas???

Hola.
Estoy creando una galería de imágenes que se abrirá con lightbox pero tengo un problema para tener varias lineas de 2 o 3 imágenes en miniatura y que el texto esté a la derecha de estás miniaturas.
Adjunto una muestra de mi pagina.

Subo también los scripts:
El HTML

<div id="templatemo_main_wrapper">
<div id="templatemo_main">

<div id="templatemo_content">

<h2>Proyectos de Christophe Jumel,(Arquitecto en París)</h2>
<p>Si pincha en la imágenes en miniatura, podrá ver varias imágenes de cada proyecto.</p>

<div class="cleaner h40"></div>

<div id="gallery">
<div class="gallery_box">
<a href="images/gallery/01_Allianz_vue_A1_06w1.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/01_Allianz_vue_A1_06_S.jpg" alt="Image 1" height="60"/></a>

<a href="images/gallery/02_Allianz_vue_B1_04_copiaW.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/02_Allianz_vue_B1_04_copia_S.jpg" alt="Image 2" height="60"/></a>

<a href="images/gallery/01_Allianz_vue_A1_06w1.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/01_Allianz_vue_A1_06_S.jpg" alt="Image 1" height="60"/></a>

<a href="images/gallery/02_Allianz_vue_B1_04_copiaW.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/02_Allianz_vue_B1_04_copia_S.jpg" alt="Image 2" height="60"/></a>
<div class="right">
<h5>ALLIANZ SEGUROS</h5>
<p>Proyecto de reforma de la sede <b><u>ALLIANZ SEGUROS</u></b> ubicada en "la Tour Neptune" en la esplanada de "La Défense" en París.</p>
<p>Dotado de 2 zonas de espera, el hall de acceso fue fruto del primer proyecto bajo el lema "fenêtre sur la Seine" (ventana sobre el sena).
Luego se encargo el proyecto de la zona de transición hacia los ascensores, la cafetería y múltiples rincones de descanso.</p>
<a href="#" class="more float_r">ver imágenes</a>
</div>
<div class="cleaner"></div>
</div>

Y parte del CSS:

#gallery { clear: both; }
.gallery_box { padding: 0 0 30px 0; margin: 0 0 30px 0; border-bottom: 1px dashed #433d3a; }
.last_gallery_box { padding: 0; margin: 0; border: none; }
.gallery_box a.gallery_img { display: block; float: left; width: 240px; height: 160px; }
.gallery_box .right { float: right; width: 330px; }

De antemano, gracias por la ayuda.

Bueno. He cambiado un poco el sript pero la cosa sigue igual.
Intente cambiar el padding y margin de la clase ".galleryad_box" pero no consigo dejar una fila de 3 imagenes y otra debajo con el texto a la derecha.
Supongo que es porque tanto las miniaturas como el texto están en la misma capa (o div). ¿tengo que ponerlos en 2 capas diferentes?
(La captura de pantalla es la misma que en el mensaje anterior).

Aquí van los script:
HTML:

<div id="templatemo_main_wrapper">
<div id="templatemo_main">

<div id="templatemo_content">

<h2>Proyectos de Christophe Jumel,(Arquitecto en París)</h2>
<p>Si pincha en la imágenes en miniatura, podrá ver varias imágenes de cada proyecto.</p>

<div class="cleaner h40"></div>

<div id="galleryad">
<div class="galleryad_box">
<a href="images/gallery/01_Allianz_vue_A1_06w1.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/01_Allianz_vue_A1_06_S.jpg" alt="Image 1" height="60"/></a>

<a href="images/gallery/02_Allianz_vue_B1_04_copiaW.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/02_Allianz_vue_B1_04_copia_S.jpg" alt="Image 2" height="60"/></a>

<a href="images/gallery/01_Allianz_vue_A1_06w1.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/01_Allianz_vue_A1_06_S.jpg" alt="Image 1" height="60"/></a>

<a href="images/gallery/02_Allianz_vue_B1_04_copiaW.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/02_Allianz_vue_B1_04_copia_S.jpg" alt="Image 2" height="60"/></a>
<div class="right">
<h5>ALLIANZ SEGUROS</h5>
<p>Proyecto de reforma de la sede <b><u>ALLIANZ SEGUROS</u></b> ubicada en "la Tour Neptune" en la esplanada de "La Défense" en París.</p>
<p>Dotado de 2 zonas de espera, el hall de acceso fue fruto del primer proyecto bajo el lema "fenêtre sur la Seine" (ventana sobre el sena).
Luego se encargo el proyecto de la zona de transición hacia los ascensores, la cafetería y múltiples rincones de descanso.</p>
<a href="#" class="more float_r">ver imágenes</a>
</div>
<div class="cleaner"></div>

Y el CSS:

/* jQuery lightBox plugin - Galleryad style */
#galleryad {
float: left;
width: 640px;
}
.galleryad_box { padding: 10px 0 30px 0; margin: 10px 0 30px 0; border-bottom: 1px dashed #433d3a; }
.last_galleryad_box { padding: 0; margin: 0; border: none; }
.galleryad_box a.gallery_img { display: block; float: left; width: 240px; height: 160px; }
.galleryad_box .right { float: right; width: 330px; }
#galleryad ul { list-style: none; }
#galleryad ul li { display: inline; }
#galleryad ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
float: left;
}
#galleryad ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryad ul a:hover { color: #fff; }

Sigo haciendo pruebas y cambios pero sin resolver mi problema.
¿Puede que no esté en el buen apartado del foro?? Si es así, que alguien me lo diga, por favor.
Adjunto otra captura de lo que quisiera hacer, por si en una imagen se entiende mejor lo que quiero hacer.
Gracias.

hola
asi es, para mayor control en un div metes las minaturas
y en otro a la derecha, metes el texto
de esa forma te aseguras que si no caben las imagenes en una sola linea, automaticamente se acomodarán en la siguiente, y el texto no se deformará

si no lo consigues nos avisas para descargar tus códigos

saludos

Hola Yaneth.
Gracias por contestar.
He intentado hacer lo que me dices pero no me da buen resultado.
El texto sigue por debajo de la linea de imágenes.
Dime como puedo hacer para que te descargues mis código.
Gracias.
Saludos.

solo pega aqui el html y el css como lo hiciste anteriormente
pero completos

saludos

o bien deja aqui la url de tu web para verla

hola
no se si ha sido error al copiar y pegar pero huuuy que de errores
asi que comenzamos

te iré poniendo el número de linea ok, asi que si puedes... copiate los codigos que me has dejado aqui en un nuevo documento para que vayas viendo los errores tal y como los veo yo

1 debe ser <!DOCTYPE html PUBLIC "- / / W3C / / D

9 borrala no tiene que estar

12... los comentarios deben tener este formato <!---comentario--->
las etiquetas tiene espacios extra; van asi </script> y tu tienes esto </ script>
tienes esto </style> y no encuentro la etiqueta que abre style asi que.. eso sobra;
y esto....<tipo de letra = "text / javascript"; como que tipo de letra????????

esta linea tambien me marca error... aunque al no conocer ese codigo... no se donde se encuentra
<script type="text/javascript"> $ (document). ready (function () { $ ('# galleryad un »). Lightbox (); $ ('location_map') mesa de luz ();.. }); </script>
y para no batallar la he borrado, ya veremos si le hace falta o no jejejej

** la mayoria de las etiquetas de cierre tienen ese espacio extra, no se si tu programa te las pone en automatico, pero dreamweaver las marca como erroneas
*los li tambien tienen error tienes esto < / li> debe ser esto </li>
aqui otro comentario mal puesto

<- fin de la envoltura header -> <- fin de templatemo_menu -> <- fin de SITE_TITLE ->

aqui otro erro mas
<a Jumel architecte </a>
<a Morlat </a>
<a Morlat> </a>

antes de seguir...
tu has hecho esos codigos??? los has copiado???? de donde????
que programa utilizas para trabajar?????
(quiero pensar que ha sido error al copiar y pegar aqui los codigos porque hay muchisimos errrores
he visto el css y las comentarios tienen error en el formato
tienes cosas como

línea altura: 1.5em; eso no es una orden válida para el css
background-color: # 000; eso tampoco; debe ser background-color:#000;

tienes esto h1 {font-size: 34px; margen: 0 0 30px 0; padding: 5px 0;} debe ser margin: 0px 0px 30px 0px; padding: 5px 0;}

y esto??? limpiador {clear:. both}

ya subiste tu web???? mejor dame la url para ver como lee los codigos el navegador jejejej

saludos

Hola Yaneth.
Los códigos son de una plantilla que me baje de una página con muchas plantillas gratis. Se llama "35 sitios para descargar plantillas CSS gratis"
Me gustaba el formato y el estilo así que pensé en modificarla para adaptarla a mi estilo.
El programa que uso es "HTML KIT".
Si te fijas en el código que he pegado más arriba, no corresponde con el que has pegado en dreamweaver; por ejemplo, no tengo ninguna etiqueta donde sobre espacios,
???Tipo de letra??? no tengo ninguna linea donde ponga "Tipo de letra".

Tengo 2 suposiciones de donde puede provenir el cambio en el código original:
1- Creo que la forma de insertar códigos en un mensaje no se debe de hacer como lo hice, es decir usando el último icono de la barra de herramientas para respuesta rápida que es como una viñeta y que dice: "Envolver on la etiqueta

el texto seleccionado".
2- Puede que al copiar los códigos de un programa (HTML KIT) y volver a pegarlos en otro (dreamweaver), cambie el código. No sé.

He visto en otros mensajes que los códigos insertados no se ven enteros sino que están como tipo "respuesta rápida", con scroll a la derecha.
He buscado como hacerlo bien pero al no encontrarlo lo hice así.
¿Me podrías decir como insertar bien un código y solucionar el problema de los errores que te salen y que a mí no?

Muchas gracias por tu ayuda.
Un saludo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Page title</title>
<link rel="stylesheet" href="ayuda.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>

<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270"
height="80"alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li><li><a href="#">Sección 2</a></li><li><a href="#">Sección 3</a></li><li><a href="#">Sección 4</a></li>

</ul>
</div>
<div id="contenido">
<div id="menu">
<h1>Título de Sección 1</h1>
<ul>
<li><a href="#">Elemento de lista, 1</a></li><li><a href="#">Elemento de lista, 2</a></li><li><a href="#">Elemento de lista, 3</a></li><li><a href="#">Elemento de lista, 4</a></li>
</ul>

</div>
<h1>Esta será la zona principal de la web</h1>
<p>En esta zona de mi web debop escribir muchos parrafos para que sobrepase el menu.</p>
<h2>Aparte de todo</h2><p>tengo que aprender a ponerles margenes y algo que se llama sangia que no se para que sirve.</p>
<p>Bueno,parece que ya lo estoy logrando, me pondre manos a la obra con los nuevos temas.</p>
<p>Al parecer me hizo falta mas texto, por eso escribo esto que realmente no dice nada
que nos pueda servir a ti o a mi pero me sirve para llenar espacio :)</p>
</div>
<div id="pie">
<div id="pieuno">

<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>

<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>

</html>

probando probando uno dos tre

heeey viste que bonito?? jejej

copias los codigos directo de tu programa
luego primero seleccionas el cuadrito de quote (Envolver con la etiqueta quote)

luego pegas el contenido al centro y listo

saludos

edito... no se que ha pasado, pero ya veo bien los codigos jejeje
ahora los veo

bien.....

el problma soy yo, no eres tu jajajaj
mas bien es mi traductor automatico jajajaja

intent asi

en el html

tienes esto

<div id="galleryad">
<div class="galleryad_box">aqui van tooodas las imagenes que tienes
</a>

<div class="right">
<h5>ALLIANZ SEGUROS</h5>
<p>Proyecto de reforma de la sede <b><u>ALLIANZ SEGUROS</u></b> ubicada en "la Tour Neptune" en la esplanada de "La Défense" en París.</p>
<p>Dotado de 2 zonas de espera, el hall de acceso fue fruto del primer proyecto bajo el lema "fenêtre sur la Seine" (ventana sobre el sena).
Luego se encargo el proyecto de la zona de transición hacia los ascensores, la cafetería y múltiples rincones de descanso.</p>

</div>este es el cierre de "right"
<div class="cleaner"></div>
</div> y este es el cierre de "galleryad_box"

ahora....cierra "galleryad_box" después de la última imágen y antes de abrir el "right"
mas o menos asi

<div id="galleryad">
<div class="galleryad_box">aqui van tooodas las imagenes que tienes
</a>
</div> y este es el cierre de "galleryad_box"

<div class="right">
<h5>ALLIANZ SEGUROS</h5>
<p>Proyecto de reforma de la sede <b><u>ALLIANZ SEGUROS</u></b> ubicada en "la Tour Neptune" en la esplanada de "La Défense" en París.</p>
<p>Dotado de 2 zonas de espera, el hall de acceso fue fruto del primer proyecto bajo el lema "fenêtre sur la Seine" (ventana sobre el sena).
Luego se encargo el proyecto de la zona de transición hacia los ascensores, la cafetería y múltiples rincones de descanso.</p>

</div>este es el cierre de "right"
<div class="cleaner"></div>

de esa forma las imágenes están en un div independiente... ahora debes ajustar el ancho que debe tener ese div... en el css
agregué un ancho fijo aproximado y le puse float left, para que permita que otro div (en este caso "right" flote a su lado)
.galleryad_box { padding: 10px 0 30px 0; margin: 10px 0 30px 0; border-bottom: 1px dashed #433d3a; width:310px; float:left }

ahora ajusta el ancho del div "right" en el css... pero como no lo encontré jajaj (supongo que tu si)
agregué al final de la hoja css

.right{width:310px; float:right}
ancho aproximado y float a la derecha

cuando digo aproximado es precisamente eso, tu ve ajustando los valores poco a poco, para que se acomode a tus necesidades

espero tus comentariios
saludos

Eres una máquina, Yaneth.
Ahora no puedo, mañana lo hago.
muuuuchas gracias.

Hola Yaneth.
He hecho lo que me dijiste y eso era lo que quería hacer. Entendí perfectamente el concepto gracias a tu buena explicación.
El problema que tengo ahora es que la columna donde va el baner y los comentarios se sale de su ubicación.
Voy a intentar solucionarlo pero si no lo consigo, te pediré una manita.
Adjunto una captura de pantalla para que lo veas.
No me deja subir más captura de pantalla porque supero lo permitido (lástima).
De momento, Gracias.
Un saludo.