Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Juntar verticalmente dos div

Estas en el tema de Juntar verticalmente dos div en el foro de CSS en Foros del Web. Hola, tengo el siguiente código: Código: <style> body { background:transparent url(fondo.jpg) repeat scroll 0 0; color:gray; font-family:helvetica,arial,sans-serif; font-size:14px; text-align:center; } .post { color:gray; margin-bottom:10px; max-width:200px; ...
  #1 (permalink)  
Antiguo 25/11/2014, 11:27
 
Fecha de Ingreso: noviembre-2014
Mensajes: 46
Antigüedad: 9 años, 3 meses
Puntos: 0
Juntar verticalmente dos div

Hola, tengo el siguiente código:

Código:
    <style>
     
    body {
    background:transparent url(fondo.jpg) repeat scroll 0 0;
    color:gray;
    font-family:helvetica,arial,sans-serif;
    font-size:14px;
    text-align:center;
    }
     
     
    .post {
    color:gray;
    margin-bottom:10px;
    max-width:200px;
    word-wrap: break-word;
    }
     
    .post h3 {
    color:orange;
    background:#0F0F0F;
    border-width: 1px;
    border-style:solid;
    border-color:333333;
    padding:5px 10px;
    }
     
    .post_body {
    color:white;
    background:black;
    line-height:19px;
    padding:5px 10px;
    border-width: 1px;
    border-style:solid;
    border-color:333333;
     
     
     
    }
     
    #cuadro {
     
    width:100px;
    height: 65px;
     
    padding:5px 10px;
    background-color:#000;
    border: solid #222 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
     
    }
    </style>
     
    <div id=cuadro>
    <font color=red>hola mundo
    dsa
    da
    dsa
    dsaads
    dsa
    das
    dsa
    </font>
    </div>
     
    dsadsadsa
     
    <div class="post">
    <h3>Menusaddddddddddddddddddddddddddddddddddddddddd</h3>
    <div class="post_body">saddasddsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
El tema esta en los .post. La idea es que los dos cuadros que genera se vean juntos no separados , pero el resultado en este código es que los cuadros post y post_body se separan verticalmente mostrando un espacio que arruina el efecto del cuadro de título y contenido.

Se ve asi :



Necesito que se vea asi :



¿ Que estoy haciendo mal ?
  #2 (permalink)  
Antiguo 25/11/2014, 11:43
 
Fecha de Ingreso: marzo-2013
Ubicación: España
Mensajes: 42
Antigüedad: 11 años
Puntos: 4
Respuesta: Juntar verticalmente dos div

Prueba a añadirle a .post_body por ejemplo un margen de margin:-20px 0 0 0; para que "suba" 20 pixeles para arriba.
saludos
  #3 (permalink)  
Antiguo 25/11/2014, 11:44
 
Fecha de Ingreso: noviembre-2014
Mensajes: 7
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Juntar verticalmente dos div

Intenta simplificar el código y usar algún Reset CSS. No sé si es exáctamente lo que quieres ya que la imagen está muy pequeña, pero prueba con esto.

CSS:
Código:
html,body,div,mark,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
img{max-width:100%;}

.post-container{padding:10px;background:#333}
.titulo{font-size:20px;color:orange}
.post{padding:10px;background:#222;border:1px solid #555;margin-top:10px;color:#ccc}
HTML:
Código:
<div class="post-container">
    <h3 class="titulo">Actualización de Octubre</h3>
    <div class="post">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
</div>
  #4 (permalink)  
Antiguo 25/11/2014, 15:09
 
Fecha de Ingreso: noviembre-2014
Mensajes: 46
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Juntar verticalmente dos div

ok , era lo que necesitaba gracias a los dos por la ayuda.

Etiquetas: background, color, juntar, página, verticalmente, width
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 04:05.