Objeto en mi tablilla se desplaza

¡¡Holiwi!!

Tengo un problema con mi tablilla, es la primera vez que posiciono objetos juntos con css y lo que me pasaba antes era que al colocarlo con la etiquera de

Código:

<style type="text/css"> </syle>

se rompía todo, entonces lo puse tal y como el código que pegué abajo y definí dos de las posiciones, ahora se ve bien pero la caja que contiene el texto como ven se sigue desplazando hacia abajo ;u; ¿Cómo puedo colocarla al nivel de la que tiene el hover y que se quede ahí sin que entre en conflicto?  

Este es el code la tablilla.

Código:

<center><link href="https://dl.dropboxusercontent.com/s/zmjdn33rcphvbuy/Eventos2017verano.css" rel="stylesheet" type="text/css"><style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700i');
 </style>


<div class="EVENTS">

<div id="Eventbar" style="background:#68D2D2;"><div class="CONT"><p>SOY UNA NORMA</p> <p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><img src="https://s25.postimg.org/472brja2n/IMAGEN-_BARRA-185_X450-circulo.png" /></div></div>
 
   <div class="Evenbox" style="background: url('https://s25.postimg.org/bj7rx2san/PRUEBA-_EVENTOS-_IMAGEN_370x450.png');"><center><div style="width: 5px; height: 320px; background: #transparent;"></div><div class="Evenbox2"  style="background: #68D2D2;font-size: 20px;color: #ededed;">NOMBRE DEL EVENTO AQUI<div class="Evenboxsub">FRASE</div></div><div class="Evenbotxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper quam molestie tincidunt rutrum. Curabitur venenatis, orci vitae scelerisque ornare, nisl urna malesuada tellus, quis dignissim arcu felis sed sapien. Praesent ut interdum arcu. Vivamus consectetur et massa vitae ultricies. Maecenas id lacinia nisi. Curabitur at ipsum porttitor, blandit urna id, pellentesque neque. Etiam ultricies purus vel lacus gravida convallis. Nullam euismod, orci iaculis posuere pellentesque, orci dolor iaculis ex, sed finibus ipsum metus et eros. Cras mollis dui vel porttitor suscipit. Nam pulvinar mattis justo et consectetur. Duis ex ante, feugiat at pharetra nec, varius nec arcu. Nunc sagittis eget augue vitae iaculis. Maecenas porttitor magna vitae nunc ultrices sodales. Aenean auctor diam eu turpis condimentum placerat. Nullam congue sapien ut rhoncus pretium.

<br>Duis maximus laoreet ultrices. Vestibulum tempus arcu ac mauris blandit, eget porttitor ante luctus. Cras accumsan, nisi non molestie maximus, ipsum eros venenatis diam, at tincidunt risus elit vitae diam. Vivamus ornare dapibus magna sed egestas. Sed lacus sem, varius ac sapien vel, bibendum bibendum ex. Ut vehicula felis at tortor porta rutrum. Integer et nunc sagittis, gravida risus quis, ullamcorper nisi. Integer in velit odio. Vivamus sit amet sapien lorem. Nam lectus nulla, ultrices at nulla vitae, vulputate dictum ligula. Suspendisse laoreet lectus nec dui maximus, ut tempor urna gravida. Morbi semper at quam eget sodales.

<br>Quisque a nulla eget nunc viverra interdum. Nam pretium rutrum consequat. Aliquam sed dignissim justo. Ut interdum massa ut commodo fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse scelerisque molestie quam quis vehicula. Etiam sed nulla iaculis massa tincidunt tempus. Vestibulum gravida massa et orci consequat, quis accumsan nunc pulvinar. Etiam consequat ex eget dolor sodales dapibus. Nunc vulputate mi eget maximus porttitor. Proin id imperdiet quam, nec porta enim. Vivamus et odio vestibulum, luctus est a, rutrum odio. Morbi cursus leo vel ultrices lobortis.</div></br></center></div></div>

<div class="PIEVENT" style="background-color:#68D2D2;font-size:18px;"><div class="PIEVtext" style="color:white;">AQUÍ VA ALGO ZUKULENTO(?)</div></div><div style="font-family: georgia; font-size: 10px; text-transform: normal; color: #3AACAC; padding: 5px; text-align: right; width: 550px;">Tablilla hecha por @Dopy con ayuda de @Jonsei para ITR</div>
</center>

Gracias por leer ♥

¡Holi!

Muchas gracias por tu consejo y responder este tema ;u;

Efectué lo que me dijiste y probé a quitar ese valor, pero me quita el efecto que quería oTL

Entonces me gustaría conservar el scroll que desplaza el "Evenbox2" y "Evenboxsub" a mi también me resultó extraño dejarlo, pero si lo quito me rompe toda la tablilla x.x no sé si es que habrá algo mal también en la propiedad de CSS D:

Dejaré unas imagencitas en spoiler sobre como debería quedar la tablilla -No sabe porqué en code pen se ve bien y en foros no-

Spoiler:

¡Hola!

Estuve revisando tu código y encontré los errores.
Básicamente tenías, además del problema que mencionó Wadanohara, un /div de más y por esa razón se volvía todo feo cuando lo ponías en un foro que no lo arreglaba por sí solo.

Me tomé la libertad y el atrevimiento de tocar un poco tu código también, de modo que debes modificar estas líneas de tu css

Código:

.Evenbox2{width:300px; height: auto; background-color: #68D2D2; padding: 20px;  font-family: Old Standard; text-align: center;letter-spacing: 2px;  margin-bottom: 10px; margin-top: 36px; opacity: .8; }

.Evenboxsub {color: #ededed;font-family: actor; font-size: 8px; text-align: center;letter-spacing: 6px;text-transform: uppercase;} .Evenbotxt {width: 320px; height: 270px; background: #ededed; padding: 10px;text-align: justify; color: #000; font-family: actor; font-size: 11px;overflow:auto;opacity: .8; }

La razón es porque no necesitas un tamaño de tabla en el cuadro de tu frase, estás haciendo que se ponga encima la una de la otra. Sólo debes definir el tamaño de la caja donde irá el "NOMBRE DEL EVENTO" y la "FRASE" en el primero de los divs (Evenbox2). Como puedes ver, el color lo puse directamente allí; en css colocas el código background únicamente cuando pondrás una imagen, que quedaría background: url('link');, si quieres colocar un color de fondo, debes poner background-color.

De ahí solamente fueron unos pequeños espacios entre divs (si le das al botón [ENTER], se mueve también el código).

Edita las líneas que te mencioné en tu CSS y luego publícalo de esta forma:

Código:

<center><link href="https://dl.dropboxusercontent.com/s/zmjdn33rcphvbuy/Eventos2017verano.css" rel="stylesheet" type="text/css"><style>@import url('https://fonts.googleapis.com/css?family=Open+Sans:700i');</style>

<div class="EVENTS"><div id="Eventbar" style="background:#68D2D2;"><div class="CONT"><p>SOY UNA NORMA</p> <p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><p>SOY UNA NORMA</p><img src="https://s25.postimg.org/472brja2n/IMAGEN-_BARRA-185_X450-circulo.png" /></div></div><div class="Evenbox" style="background: url('https://s25.postimg.org/bj7rx2san/PRUEBA-_EVENTOS-_IMAGEN_370x450.png');"><center><div class="Evenbox2"  style="background: #68D2D2;font-size: 20px;color: #ededed;">NOMBRE DEL EVENTO AQUI<div class="Evenboxsub">FRASE</div></div><div class="Evenbotxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper quam molestie tincidunt rutrum. Curabitur venenatis, orci vitae scelerisque ornare, nisl urna malesuada tellus, quis dignissim arcu felis sed sapien. Praesent ut interdum arcu. Vivamus consectetur et massa vitae ultricies. Maecenas id lacinia nisi. Curabitur at ipsum porttitor, blandit urna id, pellentesque neque. Etiam ultricies purus vel lacus gravida convallis. Nullam euismod, orci iaculis posuere pellentesque, orci dolor iaculis ex, sed finibus ipsum metus et eros. Cras mollis dui vel porttitor suscipit. Nam pulvinar mattis justo et consectetur. Duis ex ante, feugiat at pharetra nec, varius nec arcu. Nunc sagittis eget augue vitae iaculis. Maecenas porttitor magna vitae nunc ultrices sodales. Aenean auctor diam eu turpis condimentum placerat. Nullam congue sapien ut rhoncus pretium.

<br>Duis maximus laoreet ultrices. Vestibulum tempus arcu ac mauris blandit, eget porttitor ante luctus. Cras accumsan, nisi non molestie maximus, ipsum eros venenatis diam, at tincidunt risus elit vitae diam. Vivamus ornare dapibus magna sed egestas. Sed lacus sem, varius ac sapien vel, bibendum bibendum ex. Ut vehicula felis at tortor porta rutrum. Integer et nunc sagittis, gravida risus quis, ullamcorper nisi. Integer in velit odio. Vivamus sit amet sapien lorem. Nam lectus nulla, ultrices at nulla vitae, vulputate dictum ligula. Suspendisse laoreet lectus nec dui maximus, ut tempor urna gravida. Morbi semper at quam eget sodales.

<br>Quisque a nulla eget nunc viverra interdum. Nam pretium rutrum consequat. Aliquam sed dignissim justo. Ut interdum massa ut commodo fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse scelerisque molestie quam quis vehicula. Etiam sed nulla iaculis massa tincidunt tempus. Vestibulum gravida massa et orci consequat, quis accumsan nunc pulvinar. Etiam consequat ex eget dolor sodales dapibus. Nunc vulputate mi eget maximus porttitor. Proin id imperdiet quam, nec porta enim. Vivamus et odio vestibulum, luctus est a, rutrum odio. Morbi cursus leo vel ultrices lobortis.</div></br></center></div></div><div class="PIEVENT" style="background-color:#68D2D2;font-size:18px;"><div class="PIEVtext" style="color:white;">AQUÍ VA ALGO ZUKULENTO(?)</div></div><div style="font-family: georgia; font-size: 10px; text-transform: normal; color: #3AACAC; padding: 5px; text-align: right; width: 550px;">Tablilla hecha por @Dopy con ayuda de @Jonsei para ITR</div>
</center>

Y no deberías tener problemas.

Esto es la prueba de cómo quedó al final en un foro (conste, es mi foro de pruebas y lo borraré al final, así que descuida!)

Spoiler:

¡Saludos y espero te haya ayudado!

¡¡¡Hola!!!
¡¡Muchisisisisimas gracias!! -le da un besote enormérimo a ambos- gracias por vuestra ayuda, el consejo de Arec me sirvió y pude arreglarlo (No te preocupes por lo del foro jajaja todo fue por el bien de echar una manita ) os estoy muy agradecida.

Ahora no sé si tengo que cerrar el tema o poner resuelto D: Bueno, lo pogno por aquí también: