Question

Buenas tardes

Estoy trabajando en una web http://ritmicagalapagar.es/ del club de gimnasia de mi hija.
En el index, quiero poner las tres secciones ( Bienvenidos al club de Gimnasia) Ultimas noticias y hemeroteca en la misma linea . No doy con la solución . Me podrías ayudar por favor. La realidad es que quiero que aparezca primero la Hemeroteca, después la caja verde de Bienvenido al club de gimnasia y por último las últimas noticias
Sabéis como puedo hacerlo . Muchas gracias

<div class="column col-23">

<div class="box color-blue">

<h2>Bienvenido al Club de Gimnasia Galapagar </h2> 
<p class="size-big">Si estás buscando hacer gimnasia rítmica en la zona noroeste de Madrid de una manera divertida, nuestros objetivos son sencillos: inculcar a las niñas el amor por la gimnasia, dentro de un clima de respeto y compañerismo y fortalecer entre ellas la unión y espíritu de trabajo en equipo. Un Club donde entrenar y divertirte es posible. </p>
</div>  

</div>

<div class="column col-13 last">
<h2> Ultimas noticias </h2>

<div class="wrap-testimonials-shortcode apply-top-margin normal" data-time="4000">

<div class="testimonials-list">

<article class="testimonial testimonial-78 item-1">
<div class="testimonial-container">
<blockquote><p>  Conjunto Benjamín B. Primeras clasificadas en categoría Precompetición, 1ª fase ADS </p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">14-04-2015 </cite></p></div></article>

<article class="testimonial testimonial-78 item-2">
<div class="testimonial-container">
<blockquote><p>  Conjunto Benjamín A. Nota de 14,500 en la 2ª fase de ADS Competición. Maravillosas </p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">19-04-2015 </cite></p></div></article>

<article class="testimonial testimonial-78 item-3">
<div class="testimonial-container">
<blockquote><p>  Conjunto Alevín Precompetición. Con nuevas incorporaciones al equipo, tienen un ejercicio perfecto y muy trabajado</p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">19-04-2015 </cite></p></div></article>

<article class="testimonial testimonial-78 item-4">
<div class="testimonial-container">
<blockquote><p>  Conjunto Infantil Competición. Gran ejercicio con 5 cuerdas. Disciplinadas y trabajadoras</p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">19-04-2015 </cite></p></div></article>

<article class="testimonial testimonial-78 item-5">
<div class="testimonial-container">
<blockquote><p>  Conjunto Cadete Competición. 4ª en la 2ª fase de ADS competirán el 10 de mayo en las semifinales de la Comunidad</p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">19-04-2015 </cite></p></div></article>

<article class="testimonial testimonial-78 item-6">
<div class="testimonial-container">
<blockquote><p>  Conjunto Juvenil Competición. Medalla de bronce en la 2ª fase de ADS. Estupenda temporada en su último año de competición</p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">19-04-2015 </cite></p></div></article>

<!-- ultima noticia -->

<article class="testimonial testimonial-78 item-7">
<div class="testimonial-container">
<blockquote><p>  Conjunto Alevín Precompetición. Con nuevas incorporaciones al equipo, tienen un ejercicio perfecto y muy trabajado</p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">19-04-2015 </cite></p></div></article>

<article class="testimonial testimonial-76 item-3">
<div class="testimonial-container">
<blockquote><p> Próximo sábado. Exhibición de escuelas de ADS en El Escorial, Nuestra cantera lleva unos ejercicios muy trabajados.</p></blockquote>
<p class="testimonial-source">
<cite class="quote-source">25/04/2014 </cite></p></div></article></div>

</div>

<h2> Hemeroteca </h2>

<a href="hemeroteca/mayo2008.jpg" class="gal"><img src="hemeroteca/mayo2008.jpg" alt="" width="50" height="50" ></a>
<a href="hemeroteca/mayo2008b.jpg" class="gal"><img src="hemeroteca/mayo2008b.jpg" alt="" width="50" height="50" ></a>
<a href="hemeroteca/Scan_Pic0005.jpg" class="gal"><img src="hemeroteca/Scan_Pic0005.jpg" alt="" width="50" height="50" ></a>
<a href="hemeroteca/junio 2013.jpg" class="gal"><img src="hemeroteca/junio 2013.jpg" alt="" width="50" height="50" ></a>
<a href="hemeroteca/junio2014.jpg" class="gal"><img src="hemeroteca/junio2014.jpg" alt="" width="50" height="50" ></a>
<a href="hemeroteca/enero2015.jpg" class="gal"><img src="hemeroteca/enero2015.jpg" alt="" width="50" height="50" ></a> 

</div>

Answer 1

Hola @gonzalss,

si no entiendo mal lo que te hace falta, es poner el contenido en 3 columnas, de forma tal que "bienvenidos" quedará a la misma altura que "últimas noticias" y que "Hemeroteca".

Para esto, así como tenés el contenido envuelto en DIVs para las dos primeras (col-13 y col-23) , envolvé en un DIV al contenido de la hemeroteca, dale float: left y adegurate de que el ancho total de las 3 columnas sume 100%

La estructura te quedaría así:

<article>
  <div  class="column col-23">
    Bienvenidos...
  </div>
  <div  class="column col-13">
    Novedades...
  </div>
  <div  class="column hemeroteca">
    Hemeroteca...
  </div>
</article>

y para ponerlo en otro orden, cambiás el orden de los DIV:

<article>
  <div  class="column hemeroteca">
    Hemeroteca...
  </div>
  <div  class="column col-23">
    Bienvenidos...
  </div>
  <div  class="column col-13">
    Novedades...
  </div>
</article>

Repito: los 3 DIV con float:left y luego jugás con el porcentaje para indicar cuánto querés que ocupe cada columna.

Si una columa "se te va para abajo", achicá el porcentaje, ya que a la medida hay que sumarle el espacio que ocupen los márgenes (o poner las 3 con margen 0)

Saludos cordiales!