Alinear verticalmente div con img

[madman_18]

Hola a todos!

Estoy intentando hacer una cosa y la verdad que no toy con la tecla

Veréis tengo dos div's que flotan y me interesaría que uno quede alineado verticalmente al centro o abajo respecto al bloque que flota a su lado.
Mi estructura es la siguiente:

Código HTML:

<article class="contenedor">
<article class="flotarizquierda">
aqui es la imagen que querria alinear
</article>
<article class="flotarderecha">
texto que quiero meter del contenido
</article>
</article>
 

Y el css que tengo ahora mismo es:

Código CSS:

.contenedor{
    height: auto;
    margin: 0 auto;
    position: relative;
    width: 1000px;
}
.flotarizquierda{
    float: left;
    height: auto;
    width: 28%;
}
.flotarderecha{
    float: left;
    height: auto;
    width: 72%;
}
 

No sé cómo alinearlo verticalmente ya que, el bloque me va a ir aumentando según el contenido...pero ya he probado con line-height, jugando con los position y el top/bottom, margin....y nada....

[jeancarsas]

Creo que aquí la respuesta:

http://www.desarrolloweb.com/articulos/alineacion-vertical-css.html

[madman_18]

Iniciado por jeancarsas

Creo que aquí la respuesta:

http://www.desarrolloweb.com/articul...tical-css.html

Gracias por contestar.

La verdad es que no me funciona....no sé si tendrá algo que ver con la estructura que tengo ahora mismo.

Código HTML:

<article class="bloque-Par">
<article class="contenedor">
<article class="flota-Izq">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum elementum dui, nec venenatis metus condimentum id. Quisque laoreet vel massa et vulputate. Aenean sed faucibus augue. Nunc nulla quam, vulputate eget mollis ultricies, euismod in velit. Mauris dictum imperdiet turpis, vel ullamcorper sapien volutpat sed. Nulla sit amet mattis justo. Nullam quis libero hendrerit, auctor nibh non, tempus enim. Suspendisse consectetur, elit vel commodo porta, augue dolor fringilla ipsum, sed hendrerit ante metus pharetra enim. Nullam vehicula a libero vel luctus. Ut mollis id ligula eget pellentesque. Fusce egestas arcu quis dui tristique rhoncus ac vitae turpis. Aliquam dictum, ligula at venenatis varius, orci dolor accumsan risus, quis ultrices odio justo sit amet leo. Integer sit amet libero eu lectus congue ornare vel non risus. Morbi molestie ligula elit, a porta orci placerat sit amet. Donec facilisis semper libero. Pellentesque a tincidunt est, a facilisis urna.
</article>
<article class="flota-Der">
<img src="mifoto.jpg" />
</article>
</article>
</article>
 

Código CSS:

.bloque-Par{background:green;width:100%;height:auto;position:relative;}
.flota-Izq{width:50%;height:auto;float:left;}
.flota-Der{width:20%;height:100%;float:left;}
.flota-Der img {vertical-align:middle;}
 

Salvo cosas como tipos de fuentes, márgenes y demás ese es básicamente mi css....el bloque que en este caso querría alinear al centro sería el "flota-Der" pero no consigo hacerlo (ni con el height 100%;ni line-height ni nada)

Ah! El bloque principal tiene para que haga el clear both después así que tranquilos jejeje

[pzin]

Creo que el primer caso de articlelitis que veo. ¿Sabes que esos elementos tienen un significado semántico? ¿Quién te dijo que usar divisiones estaba mal?

Lo más rápido y fiable es imitar el comportamiento de tablas y celdas:

Código CSS:

article.contenedor {
  display: table;
}
 
article.contenedor .contenido {
  display: table-cell;
}
 
article.contenedor .imagen {
  display: table-cell;
  vertical-align: middle;
}
 

Los elementos no se flotan, caso contrario no funcionaría.

Deberías de leerte algo acerca de convenciones de nombres de clases en CSS, y de variables en programación en general.