28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voila mon problème:
Mes carrés div de 150px débordent sans que le #global s'étire vers le bas.

Voici un exemple:

html,body{
height:100%;
background-color:#998888;
}
#global{
height:100%;
width:900px;
margin:auto;
}

#block_gauche{
float:left;
width:300px;
background-color:red;
}
#block1,#block2,#block3,#block4{
height:140px;
width:140px;
background-color:#ddeecc;
}


-------------------------------------

<body>
<div id="global">

<div id="block_gauche">

<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>

</div>

</div>
</body>


Merci
Modifié par CydGy (05 Oct 2011 - 15:01)
Avec une border blanche sur tes carrés, qui au passage font 140 px pas 150, on obtient cela:

upload/39092-Sanstitre.png

Quel est le souci, tu veux 4 carrés dans un grand carré ?
Modifié par jmlapam (05 Oct 2011 - 23:58)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.



Pour ton problème, il s'agit, à priori, d'un problème de dépassement des flottants (qui se résouds avec un bordure, raison pour laquelle jmlapam ne constate pas le problème). Une petite recherche dans la section apprendre t'aurais immédiatement donné la solution.



Bonne continuation Smiley smile

upload/1-code.gif
Oui, mais le "rectangle" de ma page qui est: #global{width:900px;margin:auto....} avec fond noir par exemple, eh bien le fond rouge avec les carré sort du fond noir. Comment faire? Smiley smile