Come si spinge un'intestazione accanto a parte di un contenitore?

Question

Ho un po '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> 

Ho bisogno di spingere la h3 in 'contentheader' verso il basso a fianco l'immagine di 'contentcontainer' pur avendo il corpo del testo sedersi accanto ad esso. Tutto è di larghezza variabile salva l'immagine.

Forse un'immagine dimostrerà migliore:

Come si può vedere, corrisponde grigio con 'cosa', verde con 'contentcontainer' e blu con 'contentheader'.

La modifica dell'HTML sarebbe un grosso problema. Inoltre, non posso creare nulla oltre all'immagine a larghezza fissa. È possibile farlo solo con i CSS? (Sarebbe fantastico essere in grado di farlo con i float e roba ma non so se è fattibile)

Answer 1

La risposta di Thirtydot nella sezione commenti ha risolto il problema.

Answer 2

Non penso che troverai una soluzione perfetta con i CSS. Potresti usare il posizionamento ma probabilmente ti imbatterai in problemi se avessi un titolo lungo che ha eseguito più di una riga.

Se si è aperti all'utilizzo di javascript, il seguente snippet non framework funzionerebbe.

// 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); 

Si potrebbe ricreare questo codice come un più ordinato, one-liner utilizzando jQuery o di un altro framework javascript.

Answer 3

Certo, ecco il Css per un setup rudimentale:

http://jsfiddle.net/Nkapr/

Chiedete se avete domande.

Answer 4

Il problema qui è la struttura HTML, non è stato scritto in realtà con il vostro obiettivo in mente (che è una rottura!)

Se tutto quello che stai dopo sta spingendo il contenitore H3 'contentheader' giù in linea con il resto del contenuto di 'contentcontainer' potresti impostare un margine superiore negativo su 'contentcontainer' per tirarlo verso l'alto, e quindi aggiungere un margine superiore positivo agli elementi in 'contentcontainer' che devono scendere (in questo caso ' immagine ') dando l'impressione che la sezione h3 sia effettivamente in linea con il resto del contenuto. È un po 'un trucco, ma potrebbe fare il trucco se non puoi modificare l'HTML.