Mettre 400px de large div centre horizontalement aligné dans une div largeur avec marge supérieure

S'il vous plaît voir le codeMettre 400px de large div centre horizontalement aligné dans une div largeur avec marge supérieure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
    <!-- 
    .header { 
height: 200px; 
background-color: #CCCCCC; 
text-align: center; 
    } 
    .contents { 
background-color: #0099FF; 
text-align: center; 
height: 400px; 
    } 
    .footer { 
    background-color: #993300; 
height: 100px; 
    } 
    .footer .footer-contents { 
margin-top: 30px; 
margin-right: auto; 
margin-bottom: 30px; 
margin-left: auto; 
width: 700px; 
    } 
    --> 
    </style> 
    </head> 

    <body> 
    <div class="header">Header</div> 
    <div class="contents"> Body </div> 
    <div class="footer"> 
    <div class="footer-contents"> 
    Some contents goes here 
    </div> 
    </div> 


    </body> 
    </html>

Je vois un espace entre le corps et le pied de page parce que j'ai mis la marge supérieure 30px pour div footer-contenu. Pourquoi puis-je mettre un div dans un autre avec une marge supérieure, En raison de cette marge tout le div pied est ajouté marge de 30 px quand vous le voyez dans le navigateur, je peux résoudre cela en ajoutant un remplissage au lieu de marge, mais je veux savoir Que faire si je veux mettre un div 700px horizontalement centré à l'intérieur d'une page complète div 100% large, et aussi je veux ajouter une marge la div interne.

Source

2011-07-17 Sohail

Ajouter du contenu autre que le div 'footer-contents' au div 'footer'. Par exemple:

<div class='footer'>&nbsp; 
    <div class='footer-contents'> 
     Some contents goes here 
    </div> 
</div>

Dans ce cas, j'obtiens la marge appliquée correctement au div interne.

http://jsfiddle.net/Fq64H/1/

Hope this helps.

Bob

Source

2011-07-17 19:34:16 rcravens

Grâce à rcravens, est-ce que seulement fait la différence? Je suis surpris, est-ce la seule façon de le faire? – Sohail

Mettre 400px de large div centre horizontalement aligné dans une div largeur avec marge supérieure

Répondre

Questions connexes