Alineando dos columnas con html5 y css3

[C2am]

Me parece que primero deberías pensar que estas buscando exactamente:
TITULO
IMAGEN TEXTO

TITULO
TEXTO IMAGEN

TITULO
IMAGEN TEXTO
Que según interpreto es la idea, y fijate muy bien el orden.

Entonces:
1- Sí el Titulo se posiciona por sobre [ imagen + texto ], entonces para qué convertirlo en inline-block, por qué no dejarlo como bloque y que ocupe su lugar natural. Luego, para que quede en línea con el texto, aplicamos un margin-left igual o un poquito superior al ancho que ocupará la imagen, para el que esté a la derecha.

Código CSS:

article h3{font-size:2em;}
 
article h3.derecha{margin-left:21%;}
 

2- aceptado 1, entonces queda posicionar la imagen y el texto según lo que buscas:

Caso 1:

Código HTML:

<article>
                <h3>Fiestas este fin de semana</h3>         
                <p class="noticia-izquierda"> bla bla </p>
                <img src="imagenes/img-noticia1.jpg" class="img-derecha" />                               
    </article>
 

Caso 2:

Código HTML:

<article>
                <h3>Fiestas este fin de semana</h3>                         
                <img src="imagenes/img-noticia1.jpg" class="img-derecha" />
                <p class="noticia-izquierda"> bla bla </p>                               
    </article>
 

Ahora para acomodar todo:
Como quieres usar display:inline-block y no float, entonces debes convertir los elementos de bloque a esa nueva realidad, y como img ya es inline, solo queda aplicarle esta propiedad a <p></p>

Código CSS:

article p{
    width: 50%;
    display: inline-block;  
    border: 1px solid red;
    vertical-align:middle;
}
 
article img{
    width: 20%;
    border: 1px solid #fff;
   vertical-align:middle;
}
 

Fijate que si no defines la alineación vertical no quedará muy bien, así que debes definirla con vertical-align, en este caso la centre verticalmente con middle.

3- Como la imagen y el <p> (transformado en inline-block), sus anchos (recuerda sumar width, margenes, padding, border) son iguales o menores al 100% se posicionarán uno al lado del otro, tal como lo harían los elementos inline.


Aquí el ejemplo

No veo, cual es el problema de usar float, y para mí es más sencillo modificar una clase css que estar tocando el marcado html, claro usando también php. Pero bue, son formas de hacer lo mismo.

Ahora, también podrías investigar lo nuevo de css3, como flexible box, etc.
http://ksesocss.blogspot.com/2012/11...te-futuro.html

Saludos