[Résolu] Question Théorique : Position ou Float ?

Bonsoir, je m'adresse a alsacréation pour les pro en CSS

En se moment je me pose une question existentielle !

Est-il préférable d'utiliser le float ou le position pour positionné des div enfants a droite et a gauche dans une div parent ?

Je me pose la question pour ma simple culture générale et également pour améliorer mes techniques de mise en page

J'ai en tout cas pu constater une meilleure compréhension du position sous IE6 que pour le Float
Modifié par Vipear (16 Jun 2011 - 01:43)

up ?

Les up ne sont pas bienvenus ici...

Mais une réponse serait la bienvenue, juste un oui ou un non me suffirait

Bonjour,

Vipear a écrit :
Est-il préférable d'utiliser le float ou le position pour positionné des div enfants a droite et a gauche dans une div parent ?

ça dépends,

De rien.


ps. : je confirme que le up est mal venu, surtout à 3 heures du post de base, un week-end, en soirée. Oui, les gens ont parfois une vie loin de leur clavier

pps. : jb, ta réponse est tout aussi utile que le up, soit-dit en passant ^^;
Modifié par Laurie-Anne (14 Jun 2011 - 08:43)

Cela dépend de rien ? c'est à dire ? s'est vague lol

Sinon désolé pour le up, mais pour une question toute bête je pensais pas que cela prendrais autant de temps, surtout qu'en général les gens aiment étaler leur savoir et le transmettre

En fait "ça dépends", point (mais la majuscule suivante était bonne).

Il n'y a pas, dans l'absolu, de solution meilleure qu'une autre. Dans les cas particulier, par contre, oui.

Donc impossible de te répondre plus précisément.

bonsoir,

En exposant un problème avec une page test ou du code, ceci aurait deux avantages:
1) t'aider a analyser ce que tu souhaite (pour nous le presenter) et peut-être te tourner naturellement vers une solution adaptée.
2) permettre au membre du forum de comprendre ta problématique.

cordialement,
GC

@Laurie-Anne : aurais-tu des exemples de cas précis comme tu dis ? m'enfin s'est étrange tous de même des caractéristiques en CSS permettant de faire la même chose, il doivent bien avoir des distinctions particulière, c'est pour cela que je me pose la question, sa ne me parait pas logique.

@gc-nomade : et bien simplement dans une situation comme celle ci

<div id="parent">
        <div id="enfant_1"></div>
        <div id="enfant_2"></div>
</div>

Exactement comme j'ai décrit dans mon 1er post, une div parent contenant des div enfants, une a droite et une a gauche et je voulais savoir si cette solution :

#parent
{
position : relative
}
#enfant_1
{
position : absolute;
left:0px
}
#enfant_2
{
position : absolute;
right:0px
}

est préférable a celle ci

#enfant_1
{
float:left
}
#enfant_2
{
float:right
}

En sachant que lorsqu'une div enfant est en float il faut préciser la hauteur (et la largeur " j'ai un doute ")
de plus, une div en float sort de son conteneur car il agit comme un block
sauf dans le cas des position auquel les div enfant reprennent les caractéristiques de la div parent.
Modifié par Vipear (15 Jun 2011 - 00:31)

bonsoir,

ton exemple embarque des balises vides qui n'afficheront rien. Quels est le cahier des charges ou contexte de ta page ? (contenu, charte graphique) .

Il y a des gabarits (ou template) sur ce site et ailleurs, tous sont bons ou mauvais. Ils dependent de l'usage.

Toujours cordialement.
GC

S'était qu'une question théorique pour ma culture perso comme je l'ai dit
et non un réel cas a mettre en pratique.

re,

sans float ou position , il y a aussi l'option display (selon ta base html) avec
table->table-cell (la plus fluide si implémentée par le navigateur) ou
block->inline-block (avec des effets de bord qui différent d'un nav a l'autre ).

Il n'y a pas de "meilleur solution", il y a dans celles que tu maitrisent , celle qui sera la mieux adaptée selon toi a un moment donné.

... desolé , te voila avec deux pistes supplémentaires

Sauf que je viens de trouver LE CAS ou un float est préférable a un position
( en plein sur mon site perso en plus )

Explication :

<div id="parent_1"> 
        <div id="enfant_1_1"></div> 
        <div id="enfant_1_2"></div> 
</div> 

<div id="parent_2"></div> 

#parent_1
{ 
position : relative 
} 
#enfant_1_1
{ 
position : absolute; 
left:0px;
height:300px
} 
#enfant_1_2
{ 
position : absolute; 
right:0px;
height:300px
}

Cela va poser problème, la div "parent_2" va s'afficher par dessus la div "parent_1"
car celle-ci ( la div "parent_1" ) ne contient pas de hauteur !
La hauteur des div enfants ne peut pas être prit en compte, seul celle du parent compte.

Alors qu'avec :

#enfant_1_1
{ 
float:left;
height:300px
} 
#enfant_1_2
{ 
float:right;
height:300px
}

#parent_2
{ 
clear:both;
} 

L'affichage se fera correctement, la div "parent_2" s'affichera après la div "parent_1"
car c'est la hauteur des enfants qui est prit en compte.
Modifié par Vipear (16 Jun 2011 - 00:13)

Autre cas favorable au float !
( se soir j'enchaine les cas ! je préfère les données si quelqu'un se posait la même question )

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

li
{
float :left
width:50px
height:50px
}

alors qu'avec un position il faut faire

<ul>
    <li id="li_1"></li>
    <li id="li_2"></li>
    <li id="li_3"></li>
</ul>

ul
{
position:relative;
height:50px
}
#li_1
{
position:absolute;
width:50px
}
#li_2
{
position:absolute;
width:50px;
left:50px
}
#li_3
{
position:absolute;
width:50px;
left:100px
}

Donc pour en conclure, d'après moi les "float" sont mieux.

ATTENTION ! pour résumer
le position est donc a utilisé (uniquement) quand il y a deux conteneurs enfants
dans un conteneur parent qui possède OBLIGATOIREMENT une hauteur, sinon le float est a privilégié.

Merci a tous pour vos réponses.
Modifié par Vipear (16 Jun 2011 - 01:54)

Bonjour à toutes et à tous,

étant aussi débutant en la matière, je peux comprendre que la question déroute les professionnelles. Mais si tu poses, comme question, l'usage que l'on doit faire entre le float et le position, je dirais simplement que tu n'as pas compris la notion de flux. Et donc la réponse très pertinente de Laurie-Anne : "ça dépend" soulève justement l'utilisation que tu veux ou que tu peux en faire.

Il faut comprendre que la première notion est celle de la boîte. La boîte doit se gérer de deux façon : d'une part vis-à-vis de ce que tu veux y mettre à l'intérieur (exemple : image et texte) et d'autre part le positionnement de cette boîte vis-à-vis des autres boîtes.

La deuxième notion est celle du flux. Pour simplifier, tu as deux sortes de boite. La première est celle du mode 'inline' et la seconde du mode 'block'. Le flux est un positionnement implicite qui sur une ligne va de gauche à droite, tant qu'il y a de la place, puis poursuit sur la ligne suivante. Le 'inline' suit le flux tandis que la bloc passe automatiquement à la ligne suivante.

En général à l'intérieur d'une boîte j'utilise souvent le float pour le positionnement d'image par exemple en laissant le texte s'enrouler autour.

Ensuite, si cela est nécessaire, le positionnement des boîtes implique l'usage du display (inline ou bloc).

Et pour terminer, car c'est le cas assez rare, tu utilises la propriété 'position' pour sortir du flux. Par exemple : une boîte qui est fixe vis-à-vis de la fenêtre.

Mais expliquer brièvement les notions de positionnement est bien trop compliqué à faire dans un forum.

@+
Modifié par Artemus24 (18 Jun 2011 - 13:04)

ça "dépend" pas ça "dépends"