Alignement de deux divs?

Question

bit d'un CSS newb ici. J'utilise la disposition de la grille fluide dans Dreamweaver CS6. J'ai créé un div headercontainer, puis des divs headerleft et headerright à l'intérieur. J'ai ajouté une image à headerleft et tapé du texte dans headerright. Je veux pouvoir faire en sorte que le texte reste aligné avec le centre de l'image, sans tenir compte du redimensionnement de la mise en page fluide.

Quelle est la meilleure façon de faire cela? Je mets les deux en-têtes dans un conteneur en espérant que cela me facilitera l'alignement des deux divs dans le conteneur, mais je ne suis pas sûr de savoir comment l'obtenir. Voici le code que j'ai actuellement pour cette section de la page:

EDIT: Code Maintenant dit (mais ne fonctionne toujours pas):

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 90.5666%; 
    padding-left: 0.2166%; 
    padding-right: 0.2166%; 
} 
#headercontainer { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    text-align: left; 
} 
#headerleft { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 49.7607%; 
} 
#headerright { 
    clear: none; 
    margin-left: 0.4784%; 
    width: 49.7607%;   
} 

Et le code html dit:

<div class="gridContainer clearfix"> 
    <div id="headercontainer"> 
    <div id="headerright"> 
     <h2>Support For All Your Gadgets &amp; Tech!</h2> 
    </div> 
    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2> 
    </div> 
    </div> 

Merci beaucoup!

Answer 1

supprimer display:block; de votre #headerleft et #headerright

En outre, vous ne pouvez définir float:left; sur l'id headerleft, et mettre la div headerright avant gauche un dans votre code html.

Answer 2

Essayez ce code:

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
} 
#headercontainer { 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    text-align: left; 
    position:relative; 
} 
#headerleft { 
    float: left; 
    margin-left: 0; 
    width: 50%; 
} 
#headerright { 
    clear: none; 
    margin-left: 50%;  
} 


<div class="gridContainer clearfix"> 
    <div id="headercontainer"> 

    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2> 
    </div> 
    <div id="headerright"> 
     <h2>Support For All Your Gadgets &amp; Tech!</h2> 
    </div> 
    </div> 
</div>