Positionnement de 2 blocs au centre [Résolu/Fermé]

Question

Positionnement de 2 blocs au centre [Résolu/Fermé]

Signaler

Marie-José - 17 janv. 2008 à 23:04
Marie-José - 19 janv. 2008 à 16:20

Bonsoir,

Dans 2 div j'ai intégré respectivement la propriété float: left; avec deux largeurs différentes : width: 210px: et width: 590px;
L'espace blanc qui se trouve à droite de mon écran, je souhaiterais le centrer en dimension égale à droite et à gauche, pour que les 2 blocs soient centrés au milieu de la page.

Merci

Afficher la suite

A voir également:

Positionnement de 2 blocs au centre
Positionnement de 2 blocs au centre ✓ - Forum - Webmaster
Centrer 2 blocs sur une page ✓ - Forum - Webmaster
Aligner deux blocs css ✓ - Forum - CSS
Mettre deux blocs cote à cote css - Forum - CSS
Différence entre ces deux blocs d'alimentation ✓ - Forum - Alimentation PC

2 réponses

Réponse 2 / 2

Marie-José
19 janv. 2008 à 16:20

Gihef,

Un grand merci pour tes infos... très détaillées... centrage parfait !

Marie-José

Posez votre question

Gihef · Accepted Answer · 2008-01-19T16:20:13+0100

Bonjour,

Une solution assez simple est de les placer dans un autre bloc que tu centreras.
Comme ça par exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center; /* ça --------------------------- */
      background-color: #932600;
      color : #344979;
      }
    #conteneur {
      position: relative;
      margin: 0 auto; /* et ça ---------------------------- */
      width: 800px;
      text-align: left;
      border : 1px solid #fff;
      background-color: #ffd;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      height : 400px;
      }
    .h {
      color : #ee5641;
      }
    p {
      margin : 1em;
      }
#left1, #left2 {
  float : left;
  background-color : #;
  }
#left1 {
  width : 210px;
  background-color : #b0c4de;
  }
#left2 {
  width : 590px;
  background-color : #ffdab9;
  }
    </style>
</head>
<body>
  <div id="conteneur">
    <p>conteneur</p>
    <div id="left1"><p class="h">left1</p></div>
    <div id="left2"><p class="h">left2</p></div>
  </div>
</body>
</html>

--

Votre réponse