28172 sujets

CSS et mise en forme, CSS3

Ajustement hauteur bloc imbriqué

Bonjour,

j'ai un soucis d'imbrication de plusieurs blocs et d'ajustement automatique des hauteurs...

* {
padding : 0;
margin : 0;
outline : none;
}
body {
	font : 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align: center; 
	background-color: #CCC;
}
div#containerGeneral {
margin:auto; 
padding:auto;
position:relative;
width : 1152px;
height: 1000px;   // je suis obligé de fixer la hauteur
background-color : #A81A1C;
background-image:url(/images/esf2.jpg);
background-position :0px 0px;
background-repeat: no-repeat ;
border:2px solid #FFF;
}
div#corpsBlanc {
	padding-top:5px;
	padding-right:5px;
	padding-bottom:5px;
	padding-left:5px;
	position : absolute;
	top : 250px;
	left : 350px;
	background-color:#FFF;
	font-family : Tahoma, Helvetica;
	font-size : 11px;
	color:#000;  // ce div là, sort du div principal et c'est du texte qui peut varier
}

et mon html

<body>
	<div id="containerGeneral">
              <div id="corpsBlanc">
                      beaucoup de texte ici.......
             </div>
    </div>
</body>

Comment faire pour que le div"corpsBlanc" puisse s'agrandir et que je ne sois pas obligé de fixer le div parent.
Merci de votre aide
Bonjour à toutes et à tous,

d'après mon expérience sur ce forum, les alsanautes n'aiment pas du tout le début de ton css, avec le RESET, c'est à dire * { ... }

On m'a conseillé de mettre les "margin:0;" et" "padding:0;" dans une liste de toutes les balises utilisées où encore, là où je veux remettre à zéro ces magin et padding.

http://www.alsacreations.com/astuce/lire/36-reset-css.html

Pour ton problème, si tu supprimes :
	position : absolute;
	top : 250px;
	left : 350px;
dans l'identifiant div#corpsBlanc et que tu remplaces cela par 
	margin : 250px 350px;
ta balise <div id="corpsBlanc"> sera bien contenu dans la balise <div id="containerGeneral">.

Maintenant tu pourras remplacer les valeurs de la propriétés margin à ta convenance.

Le problème est qu'en utilisant position:absolute, tu es sorti du flux. Ce que je te donne n'est qu'une solution basique.

@+
Modifié par Artemus24 (24 Jul 2011 - 18:40)
Merci, j'ai modifié en conséquent !

Par contre je n'arrive pas à allonger le div parent quand le div enfant est plus grand.

Comment dois je m'y prendre ?

Merci
Bonsoir Alainalpes,

suis-je bête !

J'ai oublié de te signaler que tu n'as plus besoin dans div#containerGeneral de la ligne suivante que tu pourras supprimer.
height: 1000px;   // je suis obligé de fixer la hauteur
@+
Sujet clos
Aller à