[SOLUCIONADO] Juntar verticalmente dos div

[JimmyBrain]

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 ?

[ioniben]

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

[narcecl]

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>

[JimmyBrain]

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