Agrandir un DIV lorsqu'une page est très large

**Poulpynette** · 26/03/2009, 12h37

Bonjour,

J'ai une page Web contenant une table qui est large (grand nombre de colonnes). Ce qui génère une scrollbar horizontale en bas de ma page.

J'ai au-dessus de ma table un "div" coloré, dont la largeur n'est pas spécifiée (100% par défaut donc) et qui s'arrête au bord droit de l'écran.

Ci-joint vous trouverez un schéma : en bleu l'écran, en vert la table et en noir le div.

Je souhaiterais que, lorsque la page web s'élargit à cause de la table, le div en fasse autant.

Existe-t-il une solution simple pour cela ou dois-je absolument connaître la largeur de la table ?

Merci d'avance pour vos réponses ^^

**Macmillenium** · 26/03/2009, 12h46

Bonjour,

Essaye en englobant l'ensemble des blocs dans une div.

**Poulpynette** · 26/03/2009, 12h48

Oups, je viens de voir qu'un sujet similaire a déjà été posté.

Si quelqu'un a une autre solution que l'imbrication des div (comme j'ai d'autres éléments entre mon div et ma table), je suis preneur.

Sinon je vais faire avec :/

**Poulpynette** · 26/03/2009, 12h50

Envoyé par Macmillenium

Bonjour,

Essaye en englobant l'ensemble des blocs dans une div.

Ok bah je vais essayer ça en attendant de voir s'il n'existe pas une astuce plus simple.

Merci bien

**Macmillenium** · 26/03/2009, 12h59

Envoyé par Poulpynette

Ok bah je vais essayer ça en attendant de voir s'il n'existe pas une astuce plus simple.

C'est la solution la plus simple, si le tableau est plus large, il agrandit automatiquement la largeur de la div globale (bien entendu, si la valeur de width n'est pas renseigné).
Quant aux autres blocs enfants, ils prennent dans tous les cas toute la largeur de leur conteneur parent.

**Poulpynette** · 26/03/2009, 13h04

Bizarre,

Dans mon cas la valeur de "width" n'est jamais renseignée mais les div restent cantonnés à la taille du navigateur, et la table dépasse à droite du div englobant donc ça ne sert à rien.

je vais quand même regarder si je n'ai pas fait une erreur quelque part.

**Candygirl** · 26/03/2009, 20h42

Envoyé par Macmillenium

C'est la solution la plus simple, si le tableau est plus large, il agrandit automatiquement la largeur de la div globale (bien entendu, si la valeur de width n'est pas renseigné).

Le comportement par défaut d'un type block n'est pas de s'adapter à son contenu mais de prendre tous l'espace à disposition dans son parent. Le div principal s'arrêtera donc à la taille de le zone de visualisation même si le contenu dépasse.

@Poulpynet

Suivant le contexte, donner un position:absolute ou un float:left assorti d'un min-width de 100% à ton conteneur pourrait faire l'affaire puisqu'il adaptera alors sa largeur à son contenu.

**Poulpynette** · 27/03/2009, 13h24

Envoyé par Candygirl

Suivant le contexte, donner un position:absolute ou un float:left assorti d'un min-width de 100% à ton conteneur pourrait faire l'affaire puisqu'il adaptera alors sa largeur à son contenu.

Poulpynette au rapport !

J'ai carrément mis un div conteneur de toute la page histoire de me faciliter la tâche dans mes recherches.

- en ce qui concerne position: absolute; : j'obtiens le même comportement qu'avec un display: table;, c'est à dire que cela fonctionne sous FFX mais pas sous IE.
- en ce qui concerne float: left; assorti d'un éventuel min-width: 100%;, cela n'a aucun effet. Peut-être en l'appliquant sur la table ...

Sinon une remarque : j'ai coloré le fond de mon div conteneur ;
- sous FFX il s'arrête au bord du navigateur, seule la table dépasse allègrement à droite
- sous IE le div est aussi large que la table. Ce sont les div fils qui ne suivent pas

Si ça peut aider ...

Sinon merci pour vos suggestions, ça me fait avancer petit à petit

**Macmillenium** · 27/03/2009, 13h52

Envoyé par Poulpynette

- en ce qui concerne position: absolute; : j'obtiens le même comportement qu'avec un display: table;, c'est à dire que cela fonctionne sous FFX mais pas sous IE.

Pourtant cet exemple fonctionne sous IE7+ :

Code xhtml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!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" dir="ltr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Test</title>
	<style type="text/css">
                #bloc { position:absolute; background:red; }
        </style>
</head>
 
<body>
 
	<div id="bloc">
		<table>
			<tr>
				<td>
					blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
				</td>
			</tr>
		</table>
	</div>
 
</body>
 
</html>

Sous IE6- cela fonctionne même sans positionnement absolue vu qu'il ne respecte pas et dépasse la largeur par défaut d'un élément block, 100%.

**Poulpynette** · 27/03/2009, 14h48

Envoyé par Macmillenium

Sous IE6- cela fonctionne même sans positionnement absolue vu qu'il ne respecte pas et dépasse la largeur par défaut d'un élément block, 100%.

Oui, pardon, j'ai oublié de préciser que j'étais sous IE6.
Mais chez moi cela ne fonctionne toujours pas (cf comportement décrit dans mon post précédent).

Si je trouve comment débloquer ce cas, je vous fais signe ^^

**Candygirl** · 27/03/2009, 15h08

Il est vrai que j'ai répondu sans tester

Après test, il s'avère que le position absolute ou le float donnent le même résultat. A savoir le problème ne se pose que sur IE6 et quand les "div fils" sont dotés du layout. s'ils n'ont pas le layout ça donne le résultat souhaité me semble-t-il? :

Code xhtml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
	<style type="text/css">
        * {margin:0;padding:0;}
                #bloc {
                        float:left; /* ou position:absolute; */
                        background:red;
                }
                .autre {
                        background:blue;
                        /* height:100px; donne le layout = la largeur ne s'adapte plus correctement */
                }
        </style>
</head>
 
<body>
 
	<div id="bloc">
		<div class="autre">autre</div>
		<table>
			<tr>
				<td>
					blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabl
				</td>
			</tr>
		</table>
				<div class="autre">autre</div>
	</div>
 
</body>
 
</html>

**Poulpynette** · 27/03/2009, 15h30

Bingo ! J'étais en train de tester en enlevant la hauteur au moment même où j'ai lu ton post. les grands esprits se rencontrent

Maintenant l'ennui, c'est que j'ai plusieurs div dont la hauteur est spécifiée (pour corriger d'autres difficultés de centrage vertical dans chaque div).

Bref, je corrige un problème mais j'en remets un autre sur le tapis.

Pour la petite histoire :

J'essaie de remettre un peu d'aplomb le HTML et le CSS d'une application que je reprends pour la faire évoluer.

La mise en page ayant été faite avec des tables et le style un peu dans tout les sens, je m'efforce de remettre de l'ordre dans tout ça.
Eh bien moi qui suis soucieuse d'utiliser au mieux les propriétés CSS et le HTML, j'en viens à me demander si mes prédécesseurs n'avaient pas fait le bon choix en optant pour le système de tables ^^
Certes moins élégant, mais tellement plus simple. Cela fait plusieurs jours que j'essaie seulement de remplacer quelque tables par des div, et honnêtement, c'est la misère, je n'ai jamais autant galéré (pourtant ce n'est pas la première fois que je fais ça).

Bref, désolée de raconter ma vie, mais ça fait du bien de s'exprimer des fois

Merci à vous pour votre aide

**Poulpynette** · 27/03/2009, 15h45

NB : j'ai oublié de préciser, j'ai laissé le "position: absolute;" sur le div englobant, sinon cela ne fonctionne pas.

Agrandir un DIV lorsqu'une page est très large

CSS

Discussions similaires

Partager

Partager