Aligner 3 <div> dans un autre ...

3 novembre 2006 à 12:57:31

Salut a tous .. voila j'ai un ptit probleme pour aligner 3 <div> dans un autre <div>

Image utilisateur

Moi je voudrai que le premier bloc soi en haut, il est deja apres le deuxieme soit centrer au millieu et le 3 eme en bas j'ai essayer dutiliser vertical-align: bottom; mais sa marche pas

voila ma page :

<html>
<head>
<title>Test</title>

<style>

#boit_principale
{
width: 500px;
height: 600px;
border: 1px solid black;
}

#boite_1
{
width: 200px;
height: 100px;
border: 1px solid black;
vertical-align: top;
}

#boite_2
{
width: 200px;
height: 100px;
border: 1px solid black;
}

#boite_3
{
width: 200px;
height: 100px;
border: 1px solid black;
}

</style>

</head>
<body>

<div id="boit_principale">

<div id="boite_1"></div>

<div id="boite_2"></div>

<div id="boite_3"></div>

<div id="boite_4"></div>

</div>

Bon voila merci a tous...

Steeve

3 novembre 2006 à 13:47:02

En effet j'ai pas compris !

Tu veux vertical ... mais l image que tu nous montres c'est le résultat que tu veux avoir ? ou c'est ce que tu as ?

Tu rajoute un float:left; a chaque bloc.

xbb

3 novembre 2006 à 14:42:17

Steeve ayant édité, mon intervention devient incompréhensible. J'édite aussi

DriCc3

3 novembre 2006 à 15:39:46

lol euuu en faite ej croi tu a pas compris ske jvoulasi faire en faite je voudrai les aligner verticalement

- 1 en haut
- 1 au millieu
- 1 en bas

DriCc3

4 novembre 2006 à 11:18:29

l'image que j'ai montrer c'est se que sa me donne

Steeve

4 novembre 2006 à 11:35:18

Et donc c est pas ce que tu veux ?

Tu as peut étre oublié de rajouter que tu voulais une diagonale non ?

der_shadow

4 novembre 2006 à 12:44:09

Salut,
Tu peux essayer ça :

#boit_principale
{
width: 600px;
height: 600px;
border: 1px solid black;
}

#boite_1
{
width: 200px;
height: 100px;
border: 1px solid black;
left : 0px;
}

#boite_2
{
width: 200px;
height: 100px;
border: 1px solid black;
margin: auto;
}

#boite_3
{
width: 200px;
height: 100px;
border: 1px solid black;
right: 0px;
}