2011-01-26 5 views
2

Je ne parviens pas à résoudre le problème de la centration de mes deux divs sur la page. Je sais que c'est à cause de float: à gauche. Mais pour la vie de moi, je ne peux pas comprendre comment résoudre le problème. Quelqu'un peut-il aider?Comment centrer le contenu de la page Web

Voici mon HTML:

<body> 
<div align="center"> 
<div id="left" class="left"> 
Left box needs to be on left of of white box 
</div> 

<div id="content" class="content"> 
Right box needs to be on the right side of red box 
</div> 

</div>  
</body> 

Voici mon CSS:

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; } 

body { 
    font-family: Arial, sans-serif; 
    background: #006699; 
} 

.content{ 
    width: 300px; 
    float: left; 
    background: #ffffff; 
    height: 300px; 
} 

.left{ 
    background: none repeat scroll 0 0 red; 
    float: left; 
    height: 300px; 
    width: 300px; 
} 

Je sais que le float: left; cause le problème mais je ne sais pas comment le résoudre.

Merci.

Répondre

5

les envelopper dans un div avec une largeur de jeu et margin: 0 auto; ... par exemple changer votre div haut niveau de align="center" à class="center" (ou id au lieu de la classe), puis faire:

.center { 
    width: 600px; 
    margin: 0 auto; 
} 

l'attribut align n'effectuera pas l'alignement d'un élément de niveau bloc mais plutôt l'alignement des éléments en ligne à l'intérieur. ce que vos div ne sont pas.

+0

Fonctionne bien. Je vous remercie. Je suis nouveau à CSS et cela m'a vraiment aidé. Merci encore. –