¿Cómo presiono un encabezado junto a parte de un contenedor?

Question

Tengo algo de HTML:

<div id="thing"> 
    <div id="contentheader"> 
    <h3>Header</h3> 
    </div> 
    <div id="contentcontainer"> 
    <div id="image"> 
     <img alt="balt" src="imagesrc"> 
    </div> 
    <div id="body"> 
     <p>hegl gegl</p> 
    </div> 
    </div> 
</div> 

tengo que empujar el H3 en 'contentheader' hacia abajo junto a la imagen en 'contentcontainer' mientras que el cuerpo del texto se sienta junto a él. Todo es de ancho variable guarda la imagen.

Tal vez una imagen demostrará mejor:

Como se puede ver, se corresponde con grises 'cosa', verde con 'contentcontainer' y azules con '' contentheader.

Editar el HTML sería una gran molestia. Tampoco puedo hacer otra cosa que no sea la imagen de ancho fijo. ¿Es posible hacerlo solo con CSS? (Sería increíble poder hacerlo con flotadores y cosas pero no sé si es factible)

Answer 1

El usuario de Thirtydot en la sección de comentarios resolvió mi problema.

Answer 2

No creo que encuentres una solución perfecta con CSS. Podrías usar el posicionamiento, pero probablemente te toparías con problemas si tuvieras un título largo que corriera más de una línea.

Si está abierto a usar javascript, el siguiente fragmento de código no de red funcionaría.

// Add the header inside the container div just before the body 
containerDiv = document.getElementById('contentcontainer'); 
headerDiv = document.getElementById('contentheader'); 
bodyDiv = document.getElementById('body'); 
containerDiv.insertBefore(headerDiv, bodyDiv); 

Usted puede crear de nuevo el código como un más ordenado, de una sola línea usando jQuery u otro marco Javascript.

Answer 3

Claro, aquí está el CSS para una instalación rudimentaria:

http://jsfiddle.net/Nkapr/

preguntará si usted tiene alguna pregunta.

Answer 4

El problema aquí es la estructura HTML, no es sido escrito realmente con su objetivo en mente (que es un rollo!)

Si todo lo que está después se empuja el contenedor H3 'contentheader' en línea con el resto de las cosas dentro de 'contentcontainer' puede establecer un margen superior negativo en 'contentcontainer' para tirarlo hacia arriba, y luego agregar un margen superior positivo a los elementos en 'contentcontainer' que deben bajar (en este caso ' imagen ') dando la impresión de que la sección h3 en realidad se encuentra con el resto del contenido. Es un truco, pero podría funcionar si no puedes alterar el HTML.