28173 sujets

CSS et mise en forme, CSS3

[Résolu]Float et redimensionnement de la fenêtre

Bonjour à tous,

Je dispose de deux blocs positionnés l'un à coté de l'autre grace à la propriété: float:left;

Lorsque je réduis la fenêtre du navigateur, le deuxième bloc perd son alignement et vient se positionner sour le premier bloc.

Ce comportement semble logique puisque n'ayant plus assez d'espace pour être placé à droite du premier bloc, le deuxième bloc n'a d'autre choix que de se pacer au dessous.

Ma question est donc la suivante : Comment éviter ce comportement ?

Je souhaiterais que quoiqu'il arrive à la fenêtre du navigateur ces deux blocs restent alignés l'un à côté de l'autre...tel l'aurait fait un tableau en fait.
Modifié par Heliodromel (27 Sep 2007 - 14:01)
Salut,

je continue ma recherche après avoir trouvées plusieurs pistes.

Dans le cas que j'ai précédemment décris, il existe en réalité plusieurs solutions simples.

La première qui m'a été suggérée est d'utilisé des marges : en affectant une marge gauche au deuxième bloc d'une valeur supérieure à la largeur du premier bloc, j'empêche celui-ci de glisser sous l'autre.

La seconde est d'utiliser un contexte de formatage.

Il y a un très bon tutoriel sur alsacreation a propos de ces deux notions :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

Oui mais voilà, comment peux t on faire si nous ne souhaitons pas attribuer de valeur fixe à nos blocs ?

Autrement dit, voici le contexte recherché :
On prend cette fois trois blocs dont seul l'un d'entre eux à une largeur fixe. Ces trois blocs doivent être alignés horizontalement et s'adapter à la largeur de la page.

Voici ce que cela donnerait avec un tableau :

<html>
<body>
	<table  width=100% cellpadding=0 cellspacing=0 >
		<tr>
			<td bgcolor=red> </td>
			<td bgcolor=green width=150>Colonne fixe</td>
			<td bgcolor=blue> </td>
		</tr>
	</table>
</body>
</html>


Une idée ?
Modifié par Heliodromel (27 Sep 2007 - 09:49)
Voilà, je termine ce post.

Il semble en réalité que ce que je cherche à faire ne soit pas possible.

Mon exemple précédent marche que parce qu'il est symétrique (même contenu dans les colonnes à gauche et à droite).

Je me trompe peut être mais il semble qu'au minimum deux blocs sur trois doivent posséder une largeur, qu'elle soit relative ou fixe, afin de pouvoir maîtriser le rendu...

Bonne journée à tous Smiley cligne
Bonjour,

Heliodromel a écrit :
Je me trompe peut être mais il semble qu'au minimum deux blocs sur trois doivent posséder une largeur, qu'elle soit relative ou fixe, afin de pouvoir maîtriser le rendu...

Si on utilise les flottants, oui. Il faudra une largeur pour deux blocs sur trois, que cette largeur soit en pixels ou en pourcentages.

Pour faire ce que tu veux, il y a en gros trois méthodes:

- la classique: utilisation d'un tableau à trois cellules (ça n'a rien de catastrophique Smiley cligne );
- la super-classe: utilisation de display: table-cell (non supporté par IE 6-7, par contre);
- la limitée: utilisation du positionnement absolu, voire combinaison des flottants et du positionnement absolu.

Il y a peut-être quelque chose d'intéressant avec la troisième, mais on risque vite de rencontrer des limites, en fonction du design à intégrer.
Sujet clos
Aller à