18041 sujets

Questions générales et questions de débutants

Problème de margin dans un Div

Bonjour à tous,

j'ai un problème de margin par rapport au contenu d'un DIV.
Il semblerait que sous firefox, les margins du contenu "dépassent" les limites du contenant. Ce problème n'apparait pas sous IE.

Voici le code (basique) : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
	<style type="text/css">
	HTML {
		margin: 0px;
		padding: 0px;
	}
	BODY {
		margin: 0px;
		padding: 0px;
		background-color: #6B8E23;
	}
	BODY #head {
		position: relative;
		width: 600px;
		height: 100px;
		margin: 0px auto;
		padding: 0px;
		background-color: #EEEEEE;
	}
	BODY #center {
		background-color: #006400;
		width: 530px;
		margin: 0px auto;
		padding: 0px 35px 0px 35px;
	}
	BODY #foot {
		position: relative;
		width: 600px;
		height: 100px;
		margin: 0px auto;
		padding: 0px;
		background-color: #EEEEEE;
	}
	H2 {
		position: relative;
		margin: 15px 0px 15px 0px;
		padding: 0px;
		color: #AD5819;
		font-size: 16px;
		font-weight: bold;
		text-decoration: none;
		border-top: 2px solid #EEEEEE;
		border-bottom: 2px solid #EEEEEE;
	}
	</style>
</head>

<body>
	<div id="head"></div>
	<div id="center">
	<h2>Youpi</h2>
	</div>
	<div id="foot"></div>
</body>
</html>


Je vais encore cherché car si ça tombe, c'est juste le problème du "Lundi-fin du week-end-début de la semaine-tête dans le pâté" qui me fait coincer sur ce truc...

Merci pour vos réponses !
bonjour à tous,

a priori, la seule solution que j'ai trouvé, c'est de ne pas utiliser le margin-top dans le contenu pour ne pas avoir d'écart entre les divs.

Personne n'a jamais eu ce problème avant moi ?
Il s'agit de la règle de fusion des marges, les marges (haut et bas uniquement) du contenu et du contenant fusionnent si aucune bordure ou marge interne (padding) ne s'interpose entre les deux.

Pour en savoir plus :
Méthodologie pour résoudre les problèmes d'affichage en CSS

La fusion des marges, partie 1
édit par Igor: merci de faire de vrai liens pour les url à rallonge qui déforment le forum.

(au passage il est préférable d'écrire ses sélecteurs css en minuscule)
Modifié par Igor (25 Oct 2006 - 17:44)
Sujet clos
Aller à