Foros del Web » Creando para Internet » HTML »

Div al lado de otro

Estas en el tema de Div al lado de otro en el foro de HTML en Foros del Web. Tengo una duda desde que comencé con esto del etiquetado web, siempre me da uno que otro dolor de cabeza. La duda es la siguiente, ...
  #1 (permalink)  
Antiguo 21/10/2012, 10:28
Avatar de guzzano  
Fecha de Ingreso: julio-2010
Ubicación: Isla de Margarita
Mensajes: 162
Antigüedad: 13 años, 7 meses
Puntos: 13
Div al lado de otro

Tengo una duda desde que comencé con esto del etiquetado web, siempre me da uno que otro dolor de cabeza. La duda es la siguiente, ¿cómo coloco un div al lado de otro? Por ejemplo, tengo lo siguiente:

Código HTML:
Ver original
  1. <div style = "padding-top: 20%;">
  2.                 <div style = "width:380px; height: 14px; padding-left: 40px; text-align: center;">
  3.                     <div id = "play" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/play.gif); width: 16px; height: 17px;"></div>
  4.                     <div id = "pause" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/pause.gif); width: 16px; height: 17px;"></div>
  5.                     <div id = "autor" style = "-vertical-align: middle; display: inline-block; cursor: default;"><b>Pink Floyd</b> - Shine On You Crazy Diamond</div>
  6.                     <div id = "tiempo" style = "display: none;">(<span id = "currentTime" style = "font-size:10px;"></span> / <span id = "duration" style = "font-size:10px;"></span>)</div>
  7.                     <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  8.                 </div>
  9.             </div>

Necesito color un div al lado de este, para que quede en la misma linea. ¿Cómo hago tal cosa? siempre me lo termina poniendo una linea más abajo ó en la misma linea pero al comienzo (si uso position: absolute)



Saludos, y buen día.
  #2 (permalink)  
Antiguo 21/10/2012, 11:02
Avatar de tutorias  
Fecha de Ingreso: octubre-2012
Ubicación: Medellin
Mensajes: 69
Antigüedad: 11 años, 5 meses
Puntos: 13
De acuerdo Respuesta: Div al lado de otro

Un saludo. te recomiendo, comiences a implementar HTML5 y CSS3. El ejercicio que propones se resuelve con un div contenedor y propiedades css.

Código HTML:
<!DOCTYPE HTML>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>@tutorias</title>
  <style type="text/css">
    .section{
      position: relative;
      vertical-align: top;
    }
    .article{
      border: 1px solid #555;
      display       : inline-block;
      margin       : .2em;
      max-width     : 30%;
      vertical-align: top;
    }
  </style>
</head>
<body>
  <div class="section">
    <div class="article">
        <div style = "width:380px; height: 14px; padding-left: 40px; text-align: center;">
          <div id = "play" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/play.gif); width: 16px; height: 17px;"></div>
          <div id = "pause" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/pause.gif); width: 16px; height: 17px;"></div>
          <div id = "autor" style = "-vertical-align: middle; display: inline-block; cursor: default;"><b>Pink Floyd</b> - Shine On You Crazy Diamond</div>
          <div id = "tiempo" style = "display: none;">(<span id = "currentTime" style = "font-size:10px;"></span> / <span id = "duration" style = "font-size:10px;"></span>)</div>
          <div id="jquery_jplayer_1" class="jp-jplayer"></div>
        </div>
    </div>
    <div class="article">
      otro div al lado
    </div>
  </div>
</body>
</html> 
  #3 (permalink)  
Antiguo 21/10/2012, 22:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Div al lado de otro

Otra opción es aplicarle la propiedad css "float" a los div

http://www.librosweb.es/css/capitulo5.html
Más específicamente: http://www.librosweb.es/css/capitulo..._flotante.html

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: lado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:31.