faire un div grandir et rétrécir basé sur la taille de la fenêtre du navigateur

Je suis très simple page html et je voudrais savoir comment faire les deux choses pour ma page:

  1. J'ai un div conteneur et je voudrais mettre le div conteneur dans le centre de la page.
  2. La div conteneur va grandir et rétrécir quand je redimensionner la taille des fenêtres.

J'ai écrit le code joint, mais le conteneur est toujours collé sur la gauche et cela ne va pas changer la taille quand je redimensionner la fenêtre.

<title>Demo</title>
<head>This is a demo</head>
<style>
#nav
{
background-color: red;
float: left;
width: 200px;
position:relative;

}

#detail
{
background-color: green;
float : right;
width: 800px;
position:relative;
}

div.testDetail 
{
margin-top:10px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
}

#container
{
width:1000px;
position:relative;
}
</style>

<hr>
<body>
<div id="container">
<div id="nav">
    <ul>Tests</ul>
</div>
<div id="detail">
    <div class="testDetail">
        <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
        <h3>Title</h3>
        <p>Testing</p>
    </div>
    <hr>
</div>
</div>
<body>

J'ai oublié quelque chose ici? Toute aide sera apprécier!

Grâce.

utiliser le % de taille, plutôt que PX taille, I. E width:80%;
Ou, mieux, ne flottent pas.

OriginalL'auteur Kintarō | 2012-12-19

  1. 6
    <div id="my-div">
  ...content goes here
</div>

    CSS

    #my-div{
  //For center align
  margin: 0 auto;
  //For grow & shrink as per screen size change values as per your requirements
  width: 80%;
  height: 50%;
}
    Merci! C'est ce dont j'ai besoin! 🙂
    puis-je faire pour <header>?
    Bien sûr, pourquoi pas? ou ai-je raté quelque chose ?

    OriginalL'auteur Mudassir Ali

  2. 3

    Une méthode abrégée de Matt CSS pour faire le centrage horizontal est

    margin: 0 auto;

    L'0 dictera le haut et le bas de la marge et de l'automobile les marges gauche et droite. Si vous voulez une marge sur le haut/bas, vous pouvez changer le 0 pour tout ce que vous voulez(c'est à dire margin: 20px auto; .

    OriginalL'auteur LLong

  3. 2

    Le meilleur moyen pour centrer un objet, notamment un <div>, est d'utiliser le code CSS suivant:

    margin-left: auto;
margin-right: auto;

    Sans une marge fixe, l'objet sera centré.

    Pour le redimensionnement, faire des tailles relatives (par exemple 40%) à la page plutôt qu'absolues (ex: 400px).

    Merci! Elle fonctionne.

    OriginalL'auteur BennyMathison