[SOLUCIONADO] Div se mueve cuando el de encima crece

#1 (**permalink**) 11/04/2013, 02:55

No sabia muy bien como explicarlo en el titulo. El caso es que tengo una serie de divs colocados en dos columnas con float, que muestran titulares.

Funcionaba bien hasta que cree nuevas entradas (uso wordepress) y se han descolocado los divs. En principio no tenia ni idea de que pasaba, pero tras investigarlo, creo que ocurre esto.

Cuando el tercer div tiene un titular de más de una linea, el quinto, que deberia ir justo debajo se desplaza a la posicion del sexto div. El problema es que no se por que pasa esto, ni tampoco como solucionarlo.

Les dejo el codigo y una imagen ya que lo tengo en local y no puedo poner una imagen.

Código PHP:

 
<div class="excerptContList">
<div class="thumbnailList"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('home3'); } ?></div>
<div class="excerptList">
<span class="WidgetCategory"><?php the_category(' ') ?></span><span class="ListTitulo"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>
<span class="date"><?php echo get_the_date(); ?> | <?php the_author(); ?></span>
</div>
</div><!-- end -->

Código CSS:

Ver original.excerptContList { width:48%; float:left; margin-bottom: 1%; padding-bottom:1%; border-bottom:#666 dashed 1px;}
.excerptContList:nth-child(odd) { margin-left:4%;}
.excerptContList a{ text-decoration:none; color:#000;}
.thumbnailList{ width:20%; float:left; }
.thumbnailList img {width:100%; height:60px; display:block; margin: 0 auto; border:#666 solid 1px; padding:3px;}
.excerptList {  width:75%; float:right; margin:5px 0 0 10px;  }
.WidgetCategory { padding:1% 2%; background:#A1C436; font-weight:bold; overflow:hidden; margin-right:5px;}
.ListTitulo { line-height:1.6em;}
.excerptList .date { display:block; font-size:0.8em; margin-top:4px;}
 
.excerptContWidget { width:100%; overflow:hidden; margin: 10px 0 0 0; padding-bottom:3%; border-bottom:#666 dashed 1px;}
.excerptWidget p { font-size:1.2em; line-height:0.5em;}

EDITO: no se por que no se ve la imagen...

pzin · #2 (**permalink**) 11/04/2013, 03:11

¿Lo tienes online? He probado pero no soy capaz de reproducir el error.

#3 (**permalink**) 11/04/2013, 03:19

No, estoy trabajando en local, por eso he puesto la imagen. Por cierto, gracias por hacer que se vea la imagen.

pzin · #4 (**permalink**) 11/04/2013, 03:23

Bueno, ¿y poner el código completo (HTML/CSS) en un jsfiddle/jsbin/codepen?

#5 (**permalink**) 11/04/2013, 03:34

No sabia que eran esos nombre estoy curioseando en codepen, no se como funciona.

Haber si esto sirve:

Código PHP:

  <?php get_header(); ?> 
 
<?php if (get_option('Sidebar') == 3){ 
    get_sidebar(''); 
    }  elseif (get_option('Sidebar') == 4){ 
    get_sidebar('dos'); 
    }  elseif (get_option('Sidebar') == 6){ 
    get_sidebar('dos'); 
    get_sidebar(); 
    }  
    ?> 
 
<div id="posts"> 
 
<?php if (get_option('Breadcrumb')) {?> 
<div class="breadcrumbHome"><?php the_breadcrumb(); ?></div> 
<?php } ?> 
 
<div id="modulos"> 
 
<?php $sticky = get_option('sticky_posts'); ?> 
 
 
<?php //Definir los parámetros de la consulta a la base de datos 
$args = array(  
'post__in' => $sticky, 
'caller_get_posts' => 1  
) ; 
$loop_alternativo = new WP_Query($args); 
if( $loop_alternativo->have_posts() ): 
    while( $loop_alternativo->have_posts() ): $loop_alternativo->the_post(); ?> 
  
       <div <?php post_class(); ?>> 
<div class="Sticky"> 
<div class="Sticky-thumbnail"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('home1'); } ?></div> 
<div class="Sticky-excerpt"> 
<h1><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> 
<?php the_excerpt(); ?></div> 
</div><!-- end --> 
</div> 
    <?php endwhile; endif;?> 
<?php wp_reset_postdata(); ?> 
 
 
<?php //Definir los parámetros de la consulta a la base de datos 
$args = array( 
 'post__not_in' => $sticky, 
 'posts_per_page' => 4 
 ) ; 
$loop_alternativo = new WP_Query($args); 
if( $loop_alternativo->have_posts() ): 
    while( $loop_alternativo->have_posts() ): $loop_alternativo->the_post(); 
       ?> 
<div class="excerptCont"> 
<div class="thumbnail"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('home'); } ?></div> 
<div class="excerpt"> 
<h1><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> 
<?php the_excerpt(); ?></div> 
</div> 
<?php          
    endwhile; 
endif; 
wp_reset_postdata(); ?> 
 
 
<?php //Definir los parámetros de la consulta a la base de datos 
$args = array( 
    'post__not_in' => $sticky, 
    'posts_per_page' => 6, 
    'cat'  => 7 
); 
$loop_alternativo = new WP_Query($args); 
if( $loop_alternativo->have_posts() ): 
    while( $loop_alternativo->have_posts() ): $loop_alternativo->the_post(); 
       //Ya estamos en el bucle alternativo 
       ?> 
        
<div class="excerptContList"> 
<div class="thumbnailList"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('home3'); } ?></div> 
<div class="excerptList"> 
<span class="WidgetCategory"><?php the_category(' ') ?></span><span class="ListTitulo"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></span> 
<span class="date"><?php echo get_the_date(); ?> | <?php the_author(); ?></span> 
</div> 
</div><!-- end --> 
   <?php  endwhile; 
endif; 
wp_reset_postdata(); ?> 
 
</div><!--- end modulos --> 
 
 
</div><!-- end posts --> 
 
 
<?php if (get_option('Sidebar') == 2){ 
    get_sidebar(); 
    }elseif (get_option('Sidebar') == 4){ 
    get_sidebar(); 
    }  elseif (get_option('Sidebar') == 5){ 
    get_sidebar('dos'); 
    get_sidebar(); 
    }   
    ?> 
     
</div> 
<?php get_footer();?>

#6 (**permalink**) 11/04/2013, 03:38

Código CSS:

Ver original* { margin: 0; padding: 0; list-style-position:inside; outline:#93d22b; box-sizing:border-box;}
html { font-size:100%; height:100%; font-family:sans-serif;}
body { width:100%; font-size:0.8rem; background:#FFF; }
img { border:none;}
 
 
/*---HEADER---*/
header { width:100%; overflow:hidden; margin:0 auto;}
.title { width:50%; float:left; margin-top:15px;}
.title a { color:#111; font-family: 'Ultra'; font-size:5em; font-weight:bold; text-decoration:none;  float:left;}
.widgetHeader {  height:80px; overflow:hidden; margin: 2% 0 1% 0;}
.widgetHeaderTitle{ display:none;}
 
/*---NAV--*/
#menu {line-height:25px; width:100%; float:left; font-size:1.3em; list-style: none; }
#menu a { color:#363738;float:left; text-decoration: none;}
#menu li { float:left; padding: 5px 20px; position:relative;}
#menu li:hover {background: #A1C436;}
#menu li li a { color:#000;}
#menu li li:first-child { margin-left:0;}
#menu li ul {display:none;  position:absolute; left:0; top:45px; background:#fff; box-shadow: 0 2px 7px #000; z-index:300;}
#menu li li {list-style:none; width:120px;}
#menu li:hover ul {display:block;}
.current-menu-item  {background: #A1C436;}
.current-menu-parent {  background:#A1C436;}
/*---SINGLE, PAGE-*/
#wrapper { width:92%; overflow:hidden; background:#fff; padding: 0 3%; margin:0 auto; }
#posts { width:69.5%; float:left; padding-right: 3%; margin-top:10px;}
#posts h1 { font-size:2.5em;  width:100%; overflow:hidden; }
h2 { font-size: 1.5em; margin: 3% 0 1% 0;}
h2 a { text-decoration:none; color:#000;}
.imprimir { width:25%; float:right;}
.imprimir a { text-decoration:none; color:#000; float:right; display:block; }
.imprimir a:hover{ text-decoration:underline;}
.social2 { width:100%; margin: 5% 0 0 0; overflow:hidden; border-top:1px #A1C436 solid;padding:2% 0 0 0;}
.social2 p { font-size: 1.2em; font-weight: 600; } 
.botones { margin-top:15px; width:100%;}
.tw { float:left;}
.g-plusone { }
article {line-height:1.7; font-size:1.2em;}
#posts li { font-size:1.2em; line-height:1.7;  margin-bottom:1em;}
#posts li a { }
p { margin-bottom:1em;}
p img { display:block; margin: 2% auto; max-width:100%; padding:0.7%; border:#999 1px solid; border-radius:3px; box-shadow: -3px 3px 5px #999; }
p a { color:#A1C436;}
#prePost { margin-bottom:20px; overflow:hidden;}
.breadcrumbHome { font-size:1.3em; margin-bottom: 20px; }
.breadcrumb{ font-size:1.3em; width:75%; float:left;}
.metabox { margin: 0 0 1.5% 0; overflow:hidden;}
.metabox a, .breadcrumb a, .breadcrumbHome a { color:#A1C436; text-decoration: none;}
.metabox a:hover, .breadcrumb a:hover, .breadcrumbHome a:hover{ text-decoration:underline;}
.meta {background-repeat: no-repeat; padding-left:20px;margin-bottom: 4px;float:left;height:16px;background-position: center left;}
.category {background-image:url(images/cate.png);}
.tags{background-image:url(images/tag.gif);}
.post-links { width:100%;border-top: 1px #A1C436 solid;  border-bottom: 1px #A1C436 solid; overflow:hidden; padding: 2% 0; margin:2% 0;}
.previous { width:50%; float:left; font-size:1.5em; font-weight:600;}
.previous a, .next a{ color:#A1C436; text-decoration: none;}
.previous a:hover, .next a:hover{ text-decoration:underline;}
.next { width:50%; float:right; text-align:right; font-size:1.5em; font-weight:600;}
 
/*---INDEX----------------------------------------------------------------------------------------------------------*/
.Sticky { width:100%; overflow:hidden;  margin-bottom:20px; }
.Sticky-excerpt p { font-size:1.2em; line-height:1.4em;}
.Sticky-excerpt h1{ line-height:0.8em; }
.Sticky-excerpt h1 a{ text-decoration:none; color:#000; font-size:0.6em; }
.Sticky-thumbnail{ width:100%; }
.Sticky-thumbnail img {width:100%; display:block; margin: 0 auto;}
.Sticky-excerpt {  width:100%; }
 
.excerptCont { width:49%; margin-bottom:20px; float:left;}
.excerptCont:nth-child(odd){ margin-left:2%;}
.excerpt p { font-size:1.2em; line-height:1.4;}
.excerpt h1{ font-size:0.6em; line-height:0.8em; }
.excerpt h1 a{ text-decoration:none; color:#000; font-size:0.7em; }
.thumbnail{ width:100%; }
.thumbnail img {width:100%; height:200px; }
.excerpt {  width:100%; }
 
 
.excerptContArchive { width:49%; margin-bottom:20px; float:left;}
.excerptContArchive:nth-child(odd){ margin-left:2%;}
.excerptArchive p { font-size:1.2em; line-height:1.4;}
.excerptArchive h1 a{ text-decoration:none; color:#363738; font-size:0.8em; }
.thumbnailArchive{ width:100%; }
.thumbnailArchive img {width:100%; height:200px; }
.excerptArchive {  width:100%; }
 
#modulos{ overflow:hidden;}
.excerptContList { width:48%; float:left; margin-bottom: 1%; padding-bottom:1%; border-bottom:#666 dashed 1px;}
.excerptContList:nth-child(odd) { margin-left:4%;}
.excerptContList a{ text-decoration:none; color:#000;}
.thumbnailList{ width:20%; float:left; }
.thumbnailList img {width:100%; height:60px; display:block; margin: 0 auto; border:#666 solid 1px; padding:3px;}
.excerptList {  width:75%; float:right; margin:5px 0 0 10px;  }
.WidgetCategory { padding:1% 2%; background:#A1C436; font-weight:bold; overflow:hidden; margin-right:5px;}
.ListTitulo { line-height:1.6em;}
.excerptList .date { display:block; font-size:0.8em; margin-top:4px;}
 
.excerptContWidget { width:100%; overflow:hidden; margin: 10px 0 0 0; padding-bottom:3%; border-bottom:#666 dashed 1px;}
.excerptWidget p { font-size:1.2em; line-height:0.5em;}
.thumbnailWidget{ width:17%; float:left; }
.thumbnailWidget img {width:100%; height:50px; display:block; margin: 0 auto; border:#666 solid 1px; padding:3px;}
.excerptWidget {  width:78%; float:right; margin:0 0 0 10px; }
.excerptWidget .date { display:block; font-size:0.7em; margin-top:4px;}
 
/*---SIDEBARS---*/
aside { width:30.5%;float:right; margin:10px 0 50px 0; line-height:1.4; font-size:1.2em;}
.widget{ overflow:hidden; width:100%; margin-bottom:3%; padding-bottom:2%;}
.widget li {list-style:none; padding:3%;}
.widget li:hover { background:#A1C436; text-decoration:none;}
.widget a{ text-decoration:none; color:#363738; }
.widgetTitle {font-size:1.1em; font-weight:bold; color:#fff; margin-bottom: 1%; padding:2%; background:#111;}
.tagcloud a { width:auto; float:left; margin: 1%; color:#000; padding:0.7% 2.5%; text-decoration:none;}
.tagcloud a:hover{ text-decoration:underline; background:#A1C436;}
 
.HomeWidget { width:42%; float:left; margin-top:20px; margin:2%;}
.HomeWidget1 { width:100%; padding-left:5%; float:left; margin-top:20px;}
.widgetHome{ overflow:hidden; width:100%; margin-bottom:3%; padding-bottom:2%;}
.widgetHome li {list-style:none; padding:3%;}
.widgetHome li:hover { background:#A1C436; text-decoration:none;}
.widgetHome a{ text-decoration:none; color:#000; }
.contenedor1{ width:70%; float:left;}
.contenedor2{ width:30%; float:right;}
 
 
/*---FOOTER---*/
footer { width:92%; margin: 0 auto; background:#111; overflow:hidden; font-size: 1.3em; margin-top:1%; }
footer a { color:#FFF; text-decoration:none;}
footer a:hover { text-decoration:underline;}
 
#footerWidgetCont { width: 100%; overflow:hidden; border-bottom: 1px solid #595959; margin-top:20px; }
.widgetFooter { width: 29.3%; float:left; margin-right:3%;  padding-bottom:2%;}
.widgetFooter:nth-child(3n+1) { margin-left:3%;}
.widgetFooter li {list-style:none; padding:3%;}
.widgetFooter li:hover { background:#A1C436; text-decoration:none;}
.widgetFooter a{ text-decoration:none; color:#fff; }
.widgetFooterTitle {font-size:1.1em; font-weight:bold; color:#000; margin-bottom: 1%; padding:2%; background:#A1C436;}
 
#footerDown { width:100%; padding: 0 5%; border-top:1px solid #CCC;}
#footerLinks { width:60%; float:left; padding:10px 0; overflow:hidden;}
#footerLinks li { float:left; color:#FFF; list-style:none; margin-right: 25px;}
#footerText { float:right; width:40%; padding:10px 0; color:#FFF;}
#footerText p{ float:right; margin-bottom:0;}

pzin · #7 (**permalink**) 11/04/2013, 04:03

No es por ser puñetero, pero te comentaba lo de HTML/CSS precisamente para que no pusieras PHP. Con PHP no puedo probar nada.

En este foro intenta poner siempre HTML. Porque tu problema está relacionado con CSS, nada que ver con PHP, y siendo un problema de CSS, el HTML es necesario para ver la estructura.

#8 (**permalink**) 11/04/2013, 04:29

Disculpa, no te habia entendido.

Código HTML:

Ver original<div class="excerptContList">
<div class="thumbnailList"><img width="50" height="50" src="http://localhost/pruebasphp/wordpress/wp-content/uploads/2013/04/paisajes-3d-naturaleza-50x50.jpeg" class="attachment-home3 wp-post-image" alt="paisajes-3d-naturaleza" /></div>
<div class="excerptList">
<span class="WidgetCategory"><a href="http://localhost/pruebasphp/wordpress/?cat=7" title="Ver todas las entradas en ofertas" rel="category">ofertas</a></span><span class="ListTitulo"><a href="http://localhost/pruebasphp/wordpress/?p=141" title="Why is this happen?">Why is this happen?</a></span>
<span class="date">10 abril, 2013 | Laura</span>
</div>
</div><!-- end -->
          
<div class="excerptContList">
<div class="thumbnailList"><img width="50" height="50" src="http://localhost/pruebasphp/wordpress/wp-content/uploads/2013/04/images-50x50.jpg" class="attachment-home3 wp-post-image" alt="images" /></div>
<div class="excerptList">
<span class="WidgetCategory"><a href="http://localhost/pruebasphp/wordpress/?cat=7" title="Ver todas las entradas en ofertas" rel="category">ofertas</a></span><span class="ListTitulo"><a href="http://localhost/pruebasphp/wordpress/?p=89" title="Two hundred dollars has been inverted in I+D+I">Two hundred dollars has been inverted in I+D+I</a></span>
<span class="date">9 abril, 2013 | Laura</span>
</div>
</div><!-- end -->
          
<div class="excerptContList">
<div class="thumbnailList"><img width="50" height="50" src="http://localhost/pruebasphp/wordpress/wp-content/uploads/2013/04/images-3-50x50.jpg" class="attachment-home3 wp-post-image" alt="images-(3)" /></div>
<div class="excerptList">
<span class="WidgetCategory"><a href="http://localhost/pruebasphp/wordpress/?cat=7" title="Ver todas las entradas en ofertas" rel="category">ofertas</a></span><span class="ListTitulo"><a href="http://localhost/pruebasphp/wordpress/?p=120" title="The production of meal in EEUU is decressing">The production of meal in EEUU is decressing</a></span>
<span class="date">9 abril, 2013 | Laura</span>
</div>
</div><!-- end -->
          
<div class="excerptContList">
<div class="thumbnailList"><img width="50" height="50" src="http://localhost/pruebasphp/wordpress/wp-content/uploads/2013/04/images-1-50x50.jpg" class="attachment-home3 wp-post-image" alt="images-(1)" /></div>
<div class="excerptList">
<span class="WidgetCategory"><a href="http://localhost/pruebasphp/wordpress/?cat=7" title="Ver todas las entradas en ofertas" rel="category">ofertas</a></span><span class="ListTitulo"><a href="http://localhost/pruebasphp/wordpress/?p=125" title="I dont know what title put in this entry">I dont know what title put in this entry</a></span>
<span class="date">8 abril, 2013 | Laura</span>
</div>
</div><!-- end -->
          
<div class="excerptContList">
<div class="thumbnailList"><img width="50" height="50" src="http://localhost/pruebasphp/wordpress/wp-content/uploads/2013/04/images-6-50x50.jpg" class="attachment-home3 wp-post-image" alt="images-(6)" /></div>
<div class="excerptList">
<span class="WidgetCategory"><a href="http://localhost/pruebasphp/wordpress/?cat=7" title="Ver todas las entradas en ofertas" rel="category">ofertas</a></span><span class="ListTitulo"><a href="http://localhost/pruebasphp/wordpress/?p=55" title="Finished the building of the higher tower">Finished the building of the higher tower</a></span>
<span class="date">4 abril, 2013 | Laura</span>
</div>
</div><!-- end -->
          
<div class="excerptContList">
<div class="thumbnailList"><img width="50" height="50" src="http://localhost/pruebasphp/wordpress/wp-content/uploads/2013/04/images-2-50x50.jpg" class="attachment-home3 wp-post-image" alt="images-(2)" /></div>
<div class="excerptList">
<span class="WidgetCategory"><a href="http://localhost/pruebasphp/wordpress/?cat=7" title="Ver todas las entradas en ofertas" rel="category">ofertas</a></span><span class="ListTitulo"><a href="http://localhost/pruebasphp/wordpress/?p=123" title="The visit of Rihanna to city stadium this weekend">The visit of Rihanna to city stadium this weekend</a></span>
<span class="date">3 abril, 2013 | Laura</span>
</div>
</div><!-- end -->

pzin · #9 (**permalink**) 11/04/2013, 04:36

No me sale ningún error: http://jsbin.com/ateham/1/edit

#10 (**permalink**) 11/04/2013, 04:55

Gracias, por tu ayuda. Lo he arreglado metiendo estos divs dentro de otro que hace de contenedor.

Me dado cuenta por que no te daba error al poner solo el codigo de los divs en cuestion y por que cuando hago pequeña la ventana ( es responsive) a veces se ven bien y otras no, ademas de que los otros elementos del index les ocurria lo mismo cuando la ventana es más pequeña.

Asi que todos dentro de un div contenedor y resuelto.

Siento haber mareado la perdiz siendo una tonteria lo que me pasaba, es que no le encontraba sentido.