Float et réduction de fenêtre

**Mcthief** · 31/03/2009, 12h33

Bonjour,

Mon site est : http://www.baisieuxtt.fr/

Il est divisé en 2 blocs. Mon problème est que lorsque je réduit horizontalement ma fenêtre, au lieu d'un scroll horizontale, j'ai ma partie principale du site ( mon float right qui se met en dessous de mon bloc de gauche. Or, j'aimerais que tout reste comme ca avec juste un scroll horizontale mais je ne sais pas comment faire.

Au niveau du code, j'ai ma partie gauche qui est dans un div avec un float : left; pareil pour la partie principale dans un float : right.

Merci beacoup.

**desert** · 31/03/2009, 12h58

Bonjour,
Si tu fais flotter des deux colonnes, il faut aussi que tu définisses leurs largeurs (en veillant à ce que leurs sommes ne dépassent pas les 100%) car par défaut, un div occupe tout l'espace horizontal du conteneur parent.

**Macmillenium** · 31/03/2009, 13h01

Bonjour,

Un :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#page { 
/* padding-left:50px; */
/* padding-right:150px; */
width:1080px;
margin:0 auto;
}

Te convient-il ?
Il y a un très grand espace entre tes 2 divs à droite et à gauche mais si tu tiens absolument à cet espace, tu peux passer par un min-width :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#page { 
padding-left:50px;
padding-right:150px;
min-width:1225px;
}

IE6- ne reconnait pas la propriété min-width mais reproduit le même comportement avec un simple width qu'on appelle via des commentaires conditionnelles :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
...
<!--[if lte IE 6]>
#page { 
width:1225px;
}
<![endif]-->

**Mcthief** · 31/03/2009, 13h21

Merci beaucoup! Ca marche nikel!

**Erwan31** · 31/03/2009, 14h33

Envoyé par Macmillenium

IE6- ne reconnait pas la propriété min-width mais reproduit le même comportement avec un simple width qu'on appelle via des commentaires conditionnelles :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
..
<!--[if lte IE 6]>
#page { 
width:1225px;
}
<![endif]-->

Sauf que 1225px (ou 1080) sur des écrans 1024X768 c'est pas terrible terrible Macmillénium. Tu as répondu à sa question mais autant le prévenir des problèmes d'inaccessibilité visuelle et d'ergonomie que cela pose.

**Macmillenium** · 31/03/2009, 14h55

Envoyé par Erwan31

Sauf que 1225px (ou 1080) sur des écrans 1024X768 c'est pas terrible terrible Macmillénium. Tu as répondu à sa question mais autant le prévenir des problèmes d'inaccessibilité visuelle et d'ergonomie que cela pose.

+1

J'ai juste essayé d'adapter la solution (au maximum) à son besoin, en effet une largeur de 977px aurait été plus appréciable

Float et réduction de fenêtre

CSS

Vue hybride

Discussions similaires

Partager

Partager