28172 sujets

CSS et mise en forme, CSS3

Taille automatique d'une DIV

Bonjour,

J'ai des deux DIV l'une dans l'autre et la taille de ma première DIV doit être dynamique par rapport à la seconde mais je n'y arrive pas... La div aux bordures rouge n'augmente pas sa taille en fonction de la div noir...
Vous allez mieux comprendre avec l'image...


Mon image :
http://img171.imageshack.us/i/divproblem.png/

Mon code HTML :


<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
 
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/style.css"/>
 
<script type="text/javascript" src="/js/jquery.js"></script>
 
<?php echo $this->headTitle() ?>
<?php echo $this->headScript() ?>
<?php echo $this->headStyle() ?>
 
</head>
<body>
 
 
<div id="site">
 
	 <div id="header">
	
	
		<div id="citation">
			"TEST DE CITATION"
		</div>
	
	</div>
	
	<div id="barre-menu">
		<div id="menu">
		
		</div>
	</div>
	
	<div id="middle">
		<div id="corps">
			test
		</div>
		<!--<div id="barre-droite"></div>
		 <div id="menu-droit">
			 <img src="/img/imgsc/citoyen-partout.png" />
		</div>-->
		
		
	</div>
 
	<div id="footer">
	
	</div>
</div>


Mon CSS :


body {
	margin: auto;
	background-color: #ffdff6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6d6d6d;
}
/*
form {
	display: inline;
}
 
input {
	background-color: transparent;
}
*/
 
a:link     { color: #6d6d6d; }
a:visited  { color: #6d6d6d; }
a:hover    { color: #6d6d6d; }
a:focus    { color: #6d6d6d; }
a:active   { color: #6d6d6d; }
 
#site {
	position: absolute;
	display:block;
	width: 100%;
	background-color: #ffdff6;
	background-image: url('/img/imgsc/fond.jpg');
	background-repeat: repeat-x;
	background-position: top center;
}
 
#header {
	position: relative;
	height: 180px;
	width: 700px;
	margin-left: 520px;
	border: 1px solid red;	
}
 
#citation {
	position:relative;
	width:500px;	
	margin-left:10px;
	margin-top:100px;
	font-family: Verdana ,Arial, Helvetica, sans-serif;
	font-size: 16px;
	border: 1px solid blue;		
}
 
 
#barre-menu {
	position:relative;
	width:1000px;
	height: 42px;
	
	background-image: url('/img/imgsc/barre-menu.png');
	padding-top:20px;
	margin-left:220px;
	margin-top:5px;
	z-index: 10;
	
}
 
#menu {
	position:relative;
	width:929px;
	height: 25px;
	background-image: url('/img/imgsc/menu.png');
	z-index: 1;
	margin-left:20px;
	
}
 
#middle {
	position:relative;
	
	margin-left:220px;
	width:1000px;
	min-height:500px; 
    height:auto;
	
	background-color: #ffffff;
	background-image: url('/img/imgsc/contenu.png');
	background-repeat: repeat-x;
	background-position: top center;
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6d6d6d;
	z-index: 1;
	
	border: 1px solid red;
}
 
#barre-droite {
	position:relative;
	
	margin-left:780px;
	margin-right: 200px;
	
	width:1px;
	height: 906px;
	background-color: #ffffff;
	background-image: url('/img/imgsc/barre-droite.png');
	background-repeat: repeat-x;
	background-position: bottom center;
	z-index: 1;
	
	border: 1px solid blue;
}
 
#menu-droit {
	position:relative;
	float: right;
	
	margin-left:801px;
	width: 190px;
	
	padding: 10px 10px 10px 10px;
	border: 1px solid red;
}
 
#corps {
	position:relative;
	float: left;
	
	width: 759px;
	padding: 10px 10px 10px 10px;
	border: 1px solid black;
}


J'ai besoin d'un petit coup de pouce les amis et merci d'avance.

Bonne soirée
Bonjour, ton #corps flotte à gauche ? Pourquoi et c'est ce qui cause ton problème...

Je t'invite à lire cet article sur le positionnement des éléments en css. Tu utilises des position: relative, absolute qui ne sont pas appropriés.

Initiation au positionnement CSS
Ah exact... En enlevant le float: left cela fonctionne...

Seulement dans middle je vais devoir mettre 3 colonnes... D'où le float left. Mais si je dois enlever le float left comment je peux faire mes 3 colonnes ?

J'ai suivi le tutorial d'alsacreation pour faire des colonnes mais sans succès... Alors je vais de test en test...

Dans #corp je met un float: left; dans #menu-droit je met un float:right; et pour la colonne du milieu j'utilise margin-left et margin-right

Est-ce la bonne méthodologie ?

Merci de ton aide
Erf j'ai fait comme tu me l'a conseillé et ma 3ème colonne ne s'aligne pas tous en haut... Elle se met en dessous la colonne du centre. Je ne sais pas pourquoi...
HEllo,
Si tu parle d'un élément flottant qui passe à la ligne au lieu de s'aligner en ligne, il s'agit peut être de la largeur des divers éléments flottants qui dépassent la largeur du conteneur de ces éléments (attention les margin et padding sont pris en compte dans le calcul).

Après je n'ai pas tout suivi donc je suis peut être à coté de la plaque...
Sujet clos
Aller à