Webmaster Hub > astuces pour float

Version complète: sur le forum Webmaster Hub : astuces pour float

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

smile

lundi 10 septembre 2007 à 09:07

Bonjour,

Pour faire deux colonnes ou plus, il m'arrive d'utiliser le float
exemple :

CODE

<div style="width:200px;">
<div style="float:left;width:100px;">colonne 1</div>
<div style="float:right;width:100px;">colonne 2</div>
</div>

Le problème arrive sur certains navigateurs firefox pourtant récents qui décalent la colonne de droite en dessous de la gauche, y'a t-il une astuce pour que cela reste toujours fixé ?

Merci

captain_torche

lundi 10 septembre 2007 à 09:15

Le problème doit venir de tes déclarations de taille. Essaye en diminuant la largeur de tes colonnes pour tester.

Par défaut (sans doctype), Firefox utilise le mode de rendu W3C : c'est à dire que la taille d'un élément est sa taille définie + sa taille de padding.
Dans les mêmes conditions, Internet Explorer rend les éléments différemment : le padding n'est pas ajouté à la taille d'un élément.

Pour que les navigateurs se comportent de façon identique, un doctype valide devrait être un bon début (et force le mode de rendu W3C pour IE)

dldstyle

lundi 10 septembre 2007 à 09:24

Tout comme captain_torche, j'opterai pour la déclaration de taille dans ton cas.

Ce n'est pas la question directe, mais c'est en rapport avec les floaf:left sous IE.
Avec plusieurs blocs en float left et un margin-left sur le premier, IE double cette marge. Pour corriger ce bug, il suffut de rajouter un display:inline;

Ex:

CODE

.premier_bloc {
float:left;
width:100px;
margin-left:10px; /* IE en fera une marge de 20px */
display:inline; /* avec cette propriété, tout rentrera dans l'ordre */
}
.second_bloc {
float:left;
width:100px;
}

smile

lundi 10 septembre 2007 à 09:49

Je n'ai pas de problèmes avec ie mais avec certains firefox, j'ai une déclaration comme suit :

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

smile

lundi 10 septembre 2007 à 11:32

Merci Dldstyle,
en effet le display:inline apparement rectifie le bug,
j'ai rajouté ceci :

CODE

float:left;
width:100px;
display:table-cell;display:inline-table; display:inline-block;

smile

lundi 10 septembre 2007 à 11:58

Testé sur Mozilla 1.7.12 , Netscape 7.2, Netscape 9.0b2, Opera 8.5.0, Opera 9.21, Safari 1.2, Explorer 5.2, Firefox 3.0a6 ...

C'est good

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.