Diseño horizontal

Buenas tardes, estoy intentando hacer en Joomla un diseño para navegar a lo horizontal
Tengo algo como esto

Código HTML :

<div id="total">
<div id="top"></div>
<div id="content" class="panel"></div>
</div>

y el css:

Código HTML :

#total{
   color: black;
   margin: 0;
   width:auto;
}
#top{
   background-color: #CCC;
   float: left;
   height: 500px;
   width: 400px;
}
#content{
   float: left;
   background-color: #CCC;
}
.panel {
   float: right;
   height: 500px;
   margin: 0;
   overflow: hidden;
   padding: 0;
   width: auto;
}

el content en vez de quedarse a la izquierda al lado del top se cae y se va debajo
Alguna idea de como debo hacerlo?
Necesito que al añadir artículos, estos vayan tomando su lugar uno al lado del otro y no para abajo, ya que la navegación será a lo horizontal

creo que hay dos opciones:

1._ un cambio de etiqueta div -> span (metodo rápido pero poco ortodoxo)

Código HTML :

#content{
   background-color: #CCC;
}


<div id="total"> 
<div id="top"></div> 
<span id="content" class="panel"></span> 
</div>

2._ usando el parametro display

Código HTML :

#content{
   display:inline;
   background-color: #CCC;
}


<div id="total"> 
<div id="top"></div> 
<div id="content" class="panel"></div> 
</div>
----------------
o una combinación de ambos, usando la etiqueta span y el display en css. Creo que también se debería eliminar el float de la classe panel. Siempre hay que añadir el nuevo nodo(div), [i]después de..[/i]

s

Gracias por tu ayuda, voy a probar y te cuento como me fue..

Salu2

Estoy intentando con la segunda opción y al inicio el sistema genera la etiqueta .blog-featured
que no deja trabajar a lo horizontal, a la tercera foto de 500 X500 bota la cuarta para abajo
La única opción que veo es darle a la clase .blog-featured un ancho fijo, 4500px por ejemplo
Pero lo que quería es que el contenido vaya estirándose automáticamente, parece que no es posible

lo tienes en algun servidor de prueba, deja la direccion y lo miro.

umm no, aún no, estoy trabajando en local.
Voy a subirlo y te aviso.
Gracias

ok

Hola Silvestre, [url=anden14.com/horizontal]aquí[/url] puedes darle un vistazo y ver si hay alguna manera que el ancho aumente automáticamente y no darle uno fijo.

Salu2

bueno la solución, (bueno la de un aficionado), es la siguiente.

He creado una estructura... Ventana/tira/fotograma, para entendernos, donde ventana será donde visualizamos... es decir ponemos un ancho fijo, el que queramos...
la tira será donde pongamos los fotogramas... que pueden ser una imagen como cualquier otro contendor.. div, span, o nav (para los puristas), e incluso usar una imagen (esto no es recomendable por seguir un poco al DOM).

la tira alineará los fotogramas gracias al display.inline,

Bien esto es básicamente lógico y las mentes pensantes lo deducen rápidamente... introducimos un overflow en "la ventana" y listo. Pero nos viene la duda de ... ¿como calibrar el ancho de la tira? supongo que se actualizan los contenidos ("fotogramas") y ahí no veo otra forma que hacer un pequeño script.. he de reconocer que me dio mis scripquebraderos de cabeza. Pero en realidad es un sencillo bucle que nos recorrerá la estructura dom detectando.. en este caso las IMG que hay, recogiendo su ancho.width y sacándola suma... posteriormente actualizando el ancho total de la tira.. (width).

----vaya casi parece un mini tutorial.

ahora el codig-estructura-html

Código HTML :

<!-- cuadro tira de imagenes -->
   <div id="Ventana" >
      <div id="Tira" >
         <p class="fotograma"><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p>
      </div>
   </div>

Hay un detalle si dejamos saltos de linea... las imagenes pueden colarnos un "margin" no deseado, por eso es mejor... todo pegadito.
y esto el css, no hay mucho misterio...

Código HTML :

.imagenes{
   height: 300px;
   width: 300px;
   border: 0;
   margin:0;padding:0;
}

.fotograma {
   border:0px;
   display:inline;
   margin-right:5px;
}

#Tira{}
#Ventana{
   overflow:auto;
   width:800px;
   height: 320px;
   float:left;
   border:solid 10px orange;

}

En la Tira no es necesario poner un width predeterminado ya que lo pondrá el script.

y este es javascript

Código Javascript :

      function carga(){
var temp=0;
var caja=document.getElementById("Tira");
var cells = caja.getElementsByTagName("img");

 for (var i = 0; i < cells.length; i++) {
      temp= temp+ cells[i].clientWidth+5;
 }

Es obvio modificar tanto "Tira" como la tag "img" según cada uno. Y ya para terminar de teoría aquí os dejo un enlace al resultado práctico... que mas que decir que es un espacio temporal... si cristalab dispone de alguno para dejar allí estos resultado que lo avise o que lo cuelgue allí.

ah! el script yo lo puse en el onload del body, pero eso cada uno lo pone en un menu, en una carga donde quiera vamos.

Wow Silvestre te pasaste!!! no solo me diste una mano sino que efectivamente has dejado un tutorial que espero sirva para muchos.

Mil gracias en verdad, voy a ponerlo en práctica.

Un abrazo

ok espero ver tu página acabada.. me gustó tu idea, y creo que es una solución no muy vista... ves probando parámetros etc... modifiqué alguna cosilla del css etc.. ves ajustandolo. y nada quien tenga dudas que pregunte y ajuste.