28173 sujets

CSS et mise en forme, CSS3

[Résolu] Deux div cote à cote en bas (forcé) de leur conteneur.

Bonjour, Smiley smile
Je tente de placer deux blocs cote à cote en bas d'un bloc conteneur. Mais voila ces deux derniers bloc sortent de leur conteneur. Smiley bawling
Si vous pourriez m'eclairer un peu car même malgre les tutos du site ca ne marche toujours pas. J'ai du louper quelquechose.


<head>
<style type="text/css">
.blocgris {	
	margin: 1px;
	padding: 2px;
	border: 1px solid #D5D5D5;
	background-color: #F4F4F4;
	font-size: 11px;
	width: 99%;
	background-image: url(../images/fond_bloc.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	}
.blocgrisg {
	float:left;	
	margin: 1px;
	padding: 2px;
	border: 1px solid #D5D5D5;
	font-size: 11px;
	width: 48%;
	}
.blocgrisd {
	float:right;
	margin: 1px;
	padding: 2px;
	border: 1px solid #D5D5D5;
	font-size: 11px;
	width: 48%;
	}
</style></head>

<body>
<div class="blocgris"><p>Lorem</p>
        <div class="blocgrisg">
          <p>Lorem ipsum ...</p></div>

        <div class="blocgrisd">
          <p>Lorem ipsum ...</p></div>
        </div>
</body>
</html>


Le test ici

Merci de m'avoir lu. Smiley cligne
Modifié par Spy- (20 Dec 2006 - 15:58)
Bonjour,

Essaye ces modification pour voir si cela te convient.

<style type="text/css">

.blocgris {	
	position: relative;	/* bloc référent pour le positionnement du bloc du bas */
	margin: 1px;
	padding: 2px;
	padding-bottom: 40px;
	border: 1px solid #D5D5D5;
	background-color: #F4F4F4;
	font-size: 11px;
	width: 99%;
	background-image: url(../images/fond_bloc.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	}

.blocgris_bas {	/* contient les deux blocs à positionner */
	width: 98%;	/* divisible par 2*/
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50%; /* centrage du bloc */
	margin-left: -49%; /* centrage du bloc */
	height: 40px; /* donner une hauteur pour prévoir le padding correspondant au bloc conteneur sinon chevauchement*/
	}
	
.blocgrisg {
	float:left;	
	margin: 1px;
	padding: 2px;
	border: 1px solid #D5D5D5;
	font-size: 11px;
	width: 48%;
	}

.blocgrisd {
	float:right;
	margin: 1px;
	padding: 2px;
	border: 1px solid #D5D5D5;
	font-size: 11px;
	width: 48%;
	}

</style></head>
<body>
<div class="blocgris"><p>Lorem</p>

		<div class="blocgris_bas">
        	    <div class="blocgrisg">
          	    <p>Lorem ipsum ...</p></div>

        	    <div class="blocgrisd">
         	    <p>Lorem ipsum ...</p></div>
			 
		</div>
</div>
</body>
</html>


Explications dans le code
Sujet clos
Aller à