28172 sujets

CSS et mise en forme, CSS3

Margin dans div imbriqués

Bonjour à tous.

Supposons le code html suivant


<html>
  <head>
    <style type="text/css">
      #div1
        {
        background : transparent url(div1.png) repeat-y scroll left top;
        margin-left : 30px;
        border : 1px blue solid;
        }
      #div2
        {
        margin-top : 60px;
        border : 1px red solid;
        }
    </style>
  </head>

  <body>

  Hello World !!

  <div id="div1">
    <div id="div2">
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>
  </div>

  </body>

</html>


Y'a un truc que je ne comprends pas.

Tel quel ça marche.
J'ai bien Hello World, un rectangle bleu, à l'intérieur un rectangle rouge. Le haut de celui-ci est 60px plus bas que le haut du bleu (normal - margin-top) et l'image est bien en bordure des DEUX rectangles.

Par contre, si je supprime le border de div1.

J'ai Hello World, un rectangle rouge 60px plus bas (re-normal). Par contre l'image en bordure ne commence qu'à hauteur de div2.

Seule solution que j'ai trouvé, ajouter un &nbsp; juste après le div1. Cette fois l'image est bien sur la hauteur des 2 div. Mais ... div2 est 1 ligne plus bas.

Qu'est-il possible de faire ?

Merci.
Hello tweetysat,

C'est vrai que c'est curieux que ça ne marche pas en mettant une marge au div2...par contre cela marche très bien en mettant un padding-top au div1...

@+
Olivier
Modifié par diaboliv (24 Nov 2010 - 12:56)
Salut.

Ok, ça marche aussi avec un padding-top mais ça ne change pas grand chose. En mettant le min. soit 1px, div2 est quand même décalé vers le bas (seulement 1px et plus 1 ligne mais bon...).
Par contre les choses se compliquent si j'imbrique un 3ème div avec cette fois une image alignée sur la gauche.
Sujet clos
Aller à