Répartir des div dans un div quelque soit le navigateur

Bonjour tout le monde !

Je suis nouveau sur le forum

Allez je me lance, pardonnez mon noobisme exacerbé.

J'ai une question d'apparence simple mais qui me parait compliquée dans la pratique.

Je souhaiterai répartir équitablement des div dans un div.

Voici une image qui facilitera la compréhension :



Comment procéderiez vous ?

Je vous remercie par avance

En donnant des largeurs en pourcentage aux divs internes, ainsi qu'une marge à gauche aussi en pourcentage aux 2, 3 et 4. Le tout en flottant. J'ai pas testé mais ça devrait marcher.
Modifié par Patidou (27 Jul 2009 - 00:21)

Bonsoir pouetprout et bienvenue sur Alsacréations,

a écrit :
Allez je me lance, pardonnez mon noobisme exacerbé.

Il faut bien un début pour commencer son apprentissage .
Modifié par jQz (27 Jul 2009 - 00:55)

Salut,

si par div n tu veux dire que le nombre de div n'est pas connu à l'avance il va te falloir faire ça dynamiquement (par exemple en PHP) : reprendre la solution de Patidou mais calculer le pourcentage (et peut-être la largeur ?) à affecter.

Merci pour vos reponses nocturnes ou matinales

@Heyoan : n sera un nombre connu et fini

alors je test ce matin et avec le code suivant :

<div id="master-content">
            master div
            <br/>
            <div class="content">
                div1
            </div>
            <div class="content">
                div2
            </div>
            <div class="content">
                div3
            </div>
            <div class="content">
                divn
            </div>
</div>

#master-subcontent {
	width:500px;
	height:500px;
	text-align: center;
	background-color: #d1d1d1;
	text-align:left;
}

.subcontent {
	text-align:center;
	color:#d1d1d1;
	float:left;
	height:100px;
	width:25%;
	background-color: #808080;
}

J'obtiens :


==============================================

si j'ajoute une margin pour écarter les div les uns des autres :

.subcontent {
        margin-left:5%;
	text-align:center;
	color:#d1d1d1;
	float:left;
	height:100px;
	width:25%;
	background-color: #808080;
}

j'obtiens



Qu'en pensez-vous ?
Je ne sais pas comment obtenir la distance b entre les div sans retour à la ligne.

ps: IE6 en haut a gauche
Modifié par pouetprout (27 Jul 2009 - 09:56)

Bonjour,

Ici, un tableau de mise en forme avec deux lignes contenant chacune 2 cellules fera l'affaire.

Un tableau de mise en forme pour faire cela ? o_O Y a pas vraiment besoin.

En ajoutant des marges, il faut diminuer la largeur des div, sinon effectivement, ils ne tiennent pas tous et vont donc revenir à la ligne.

a écrit :
o_O

Il ne faut pas considérer les tableaux de mise en forme comme le "diable".

Il doit bien y avoir une solution en utilisant les éléments adéquat.
J'ai toujours lu que les tableaux étaient réservés aux données, non ?
Modifié par pouetprout (27 Jul 2009 - 10:02)

mecho a écrit :
o_O

Il ne faut pas considérer les tableaux de mise en forme comme le "diable".

C'est sûr mais autant que possible on les évitera, c'est quand il n'y a pas moyen de faire autrement qu'on les utilise.
Modifié par Patidou (27 Jul 2009 - 10:04)

pouetprout a écrit :
Il doit bien y avoir une solution en utilisant les éléments adéquat.
J'ai toujours lu que les tableaux étaient réservés aux données, non ?

Laurie-Anne t'a donné la solution. En bref, si on addtionne :

(4*25%)+(4*5%) = 120%, donc trop large.

Et comme indiqué dans mon premier post, la marge de gauche ne se met que sur les 3 derniers blocs, pas sur le premier.

Hello,

Comme le souligne Heyoan, il y a également moyen de faire cela dynamiquement (PHP, Javascript,...)
Je suis "tombé" dernièrement sur un plugin lié à la librairie javascript à la mode (Jquery) qui peut éventuellement être interessant : Smart columns with Css & Jquery, à étudier, suivant le besoin réel et les capacités d'implémentation...

Pas indispensable, mais assez efficace

Cdt,
Sylvain

Bonjour tout le monde ^^

Voici la méthode que j'ai finalement choisi et qui me donne un résultat équivalent sur tous les navigateurs :

    <body>
        <div id="master-subcontent">
            <div class="subcontent1">
                div1 div1 div1 div1 div1
				<br/>
				<br/>
				<br/>
            </div>
            <div class="subcontent2">
                div2 div2 div2 div2 div2
				<br/>
				<br/>
				<br/>
            </div>
            <div class="subcontent3">
                div3 div3 div3 div3 div3
				<br/>
				<br/>
				<br/>
            </div>
            <div class="subcontent4">
                div4 div4 div4 div4 div4
				<br/>
				<br/>
				<br/><br/>
				<br/>
				<br/>
            </div>
        </div>
    </body>

* {
    padding: 0;
    margin: 0;
    border: 0;
}

body {
     
}

#master-subcontent {	
	position:relative;
    height: 200px;
	width:500px;
    padding: 0;
    margin: 0 auto;
    border: 0;
	background-color: #d1d1d1; 
	overflow:hidden;
}

.subcontent1, .subcontent2, .subcontent3, .subcontent4 {
    position: absolute;
	color:#d1d1d1;
    left: 0;
    top: 0;
    bottom: 50px;
    width: 25%;
    font-size: 1em;
	border:dashed #ff0000 thin;
	background-color: #808080;
}

.subcontent1 {left:0;
}

.subcontent2 {left:25%;
}

.subcontent3 {left:50%;
}

.subcontent4 {left:75%;
}

Résultat



Cela à l'air de fonctionner dans mon code d'ensemble.
Je réglerais les marges dans des div à l'intérieur, ma fameuse distance b.
Je fixe une hauteur hélas mais bon je veux bien payer ce prix

Qu'en pensez-vous ? Cela vous parait-il assez propre comme code ?

Merci d'avance pour votre aide !
Modifié par pouetprout (28 Jul 2009 - 07:58)

J'adore donner des réponses à des gens qui les ignorent...

Je vais donc me répéter : si tu as un bloc conteneur de 100% de largeur que dedans tu mets 4 blocs de 25% de largeur, il prennent TOUTE la place disponible. Si tu rajoutes ne serait-ce qu'une bordure d'un px à un élément, il n'y a plus assez de place et donc un retour à la ligne pour les blocs qui ne tiennent pas. Avec une marge c'est tout pareil.

Tu dois donc avoir des blocs de 20% de largeur avec une marge à gauche et à droite de 2,5% (5% de marge en tout).


Revois les bases du modèles de boite CSS, et tu comprendras peut-être mieux...

L'utilisation du positionnement absolu est loin d'être aussi stable que celles des flottant, et clairement superflue ici.

Haaalala Laurie-Anne, tu n'as pas fini de t'arracher les cheveux avec moi

Bien j'ai fais comme tu le dis mais pour les marges je les ai géré dans un div à part dans chaque colonne.
Beaucoup plus simple, ca ne fait aucun doute

        
<div id="master-sub">
            <div id="main-sub">
                <div class="sub">
                    <div class="content-sub">
                        div1 div1 div1 div1 div1
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                    </div>
                </div>
                <div class="sub">
                    <div class="content-sub">
                        div2 div2 div2 div2 div2
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                    </div>
                </div>
                <div class="sub">
                    <div class="content-sub">
                        div3 div3 div3 div3 div3
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                    </div>
                </div>
                <div class="sub">
                    <div class="content-sub">
                        div4 div4 div4 div4 div4
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                    </div>
                </div>
            </div>
        </div>

#master-sub{
	width:600px;
	height:200px;
	background-color: #d1d1d1; 
}
#main-sub{
	width:500px;
	margin: 0 auto;
}
.content-sub{
	border: #d1d1d1 solid thin;
	padding:5px;
}
.sub{
	float:left;
	width:25%;	
	background-color: #808080;
}

Résultat dans tous les navigateurs :



Je n'ai pas suffisamment de recul et d'expérience pour savoir si je prend une bonne direction.
Ce que je crains en permanence c'est de me retrouver bloqué un peu plus loin parce-que ce truc fit mal ou ce chose ne pas pas contenir ce machin. C'est pas simple de voir les conséquences de certains choix quand on débute.

@Laurie-Anne : Merci et désolé de ne pas t'avoir lu plus attentivement avant, mais comme tous les noob, je dois faire des conneries/expériences pour me rendre compte qu'il s'agit de conneries et j'acquiers les bases doucement mais surement.
Au moins, je me jete pas sur la première solution de bidouillage et j'ai le souci de bien faire.
Modifié par pouetprout (28 Jul 2009 - 10:03)

Bonjour, je suis nouveau sur le forum et faux débutant en CSS car je l'utilise depuis un moment mais... mal je m'en suis rendu compte :S

Je repars donc sur les bases pour essayer de faire les choses comme il faut.

Avant donc même de m'attarder sur la mise en page de finition (images etc...) je pars donc sur les bons gros blocs bien visibles pour savoir que je fais.

J'ai actuellement le même besoin que pouetprout pour répartir des div en float au sein d'un div conteneur.

A la lecture des différents posts j'ai biencompris la méthologie...

Ceci étant, j'aimerais obtenir ce résultat avec 4 div flottants pour certaines pages, 3 div flottants pour d'autres, bien entendu avec la même class.

La méthode ici présentée par Laurie-Anne ne s'applique que lorsque l'on sait à l'avance le nombre de div flottants que l'on souhaite intégrer à son conteneur si je ne m'abuse...

Une idée pour réaliser cela sans code dynamique?

Cordialement

Cédric
Modifié par cedric94 (22 Oct 2009 - 17:00)

En fait je viens de relire les posts... donc n div où n est l'inconnue = code dynamique... snif allez-on s'y colle alors...
Modifié par cedric94 (22 Oct 2009 - 17:06)

Salut,

Merci d'ouvrir un nouveau post pour exposer un problème, au lieu de remonter un sujet très antérieur même s'il est sur le même thème.
Cela permettra de ne pas croiser les problèmes qui ne sont peut être pas les mêmes entre le post initial et le tien, cela te permettra de paramétrer tes options de suivi du sujet, etc. Bref, bien plus profitable pour tous.