28173 sujets

CSS et mise en forme, CSS3

[Resolu] Largeur restante

Bonjour,

Dans la FAQ : "Il n'y a pas de méthode simple pour dire à un élément d'occuper la hauteur restante (contrairement à la largeur)."

Eh bien j'aimerais savoir comment faire lorsqu'on a deux div en ligne (display:inline) dont un des deux est de largeur fixe, que l'autre prenne la largeur restante.
Je n'ai pas trouvé la réponse dans la FAQ.

Merci
Modifié par djflex68 (04 Aug 2006 - 20:52)
Salut.

Tu es obligé de les mettre en display: inline ? Ou c'est pour les placer l'un à côté de l'autre ? C'est pour une mise en page à 2 colonnes ?
On peut considérer que c'est une mise en page en 2 colonnes, sachant que la 1ere à gauche est de largeur fixe, et que la 2eme doit prendre tout le reste de la page.
Modifié par djflex68 (04 Aug 2006 - 18:57)
Dans ce cas, le display: inline ne me semble pas être une bonne idée Smiley ohwell

Essaie plutôt de passer le bloc de gauche en float: left; et de donner une marge de la largeur qui va bien au div de droite. Par exemple.
Et bien, si ta colonne de gauche fait 200px de large, pour ne pas que la colonne de droite vienne mordre dessus, tu lui donne une marge gauche de 200px. Ou alors 210px si tu veux garder 10px d'écart.

La largeur qui va bien, quoi Smiley lol
Mais ma question était de savoir comment faire pour que la 2eme colonne prenne toute la largeur restante de la page...
Modifié par djflex68 (04 Aug 2006 - 19:02)
Oh si ça répond à la question !

Je peux formuler ça pour résumer :

a écrit :
Pour qu'une balise de type block utilise toute la largeur disponible, il suffit de la laisser dans le flux


C'est le comportement "naturel" des balises <div>, entre autres. Donc, si tu laisses la colonne de droite en bloc dans le flux, c-à-d sans toucher à son positionnement ni à son display, elle va occuper toute la largeur de la page. Comme on ne veut pas qu'elle bave sur l'autre colonne, on lui donne une marge à respecter à gauche. Finalement, elle occupera toute la largeur, sauf la marge.

Autrement dit, toute "la largeur restante de la page".

Edit : ah ben c'est malin d'éditer ton post, mon intro de message ne convient plus, maintenant Smiley biggol
Modifié par Sopo (04 Aug 2006 - 19:08)
c'est ce que je faisais jusqu'à présent.
Sauf que si tu mets à l'intérieur un div avec une valeur à 100% par exemple, eh bien sous IE ça va rester correct, alors que sous Firefox, il va prendre 100% de la PAGE, donc il va carrément passer tout le div à la ligne.
La règle étant qu'il faut que le bloc conteneur ait une valeur de largeur assignée (or là il n'y en a pas).

<html>
	<head>

<style>
	body
{
	background-color:White;
	height:100%;
	margin:0;
}

body *
{
	font-family:Tahoma;
}

form
{
	height:100%;
}

#page
{
	width:100%;
	height:100%;
	font-size:10pt;
}

#page .bandeau
{
	height:10%;
	background-color:336699;
}

#page .gauche
{
	float:left;
	width:200px;	
	padding:10px;
	height:90%;
	background-color:#DBEAF5;
}

#page .gauche a
{
	color:Black;
	text-decoration:none;
}

#page .libelle
{
	font-weight:bold;
	color:336699;
	
}

#page .droite
{
	float:left;
	/*width:100%;*/
	background-color:red;
	height:90%;

}

.lienMenu, .lienMenu img
{
	vertical-align:middle;
}
</style>		

	</head>
	<body>
			<div id="page">
				<div class="bandeau"></div>

				<div class="gauche">
					<p class="libelle">
						Actions
					</p>
					<p>
						<span class="lienMenu"><img src="img/mailfind.PNG">
							<a id="LNKVisualiserCourrier" href="javascript:__doPostBack('LNKVisualiserCourrier','')">Visualiser les courriers</a></span>
					</p>
					<p>

						<span class="lienMenu"><img src="img/mailnew.PNG">
							<a id="LNKSaisirCourrier" href="javascript:__doPostBack('LNKSaisirCourrier','')">Saisir un courrier </a></span>
					</p>
					<p>
						<span class="lienMenu"><img src="img/mailmodify.png">
							<a id="LNKModifierCourrier" href="javascript:__doPostBack('LNKModifierCourrier','')">Modifier un courrier </a></span>
					</p>
				</div>

				<div class="droite">
					<table cellspacing="0" rules="all" border="1" id="DGCourriers" style="width:100%;border-collapse:collapse;">
	<tr class="DataGridHeader">
		<td style="width:20%;">Expéditeur</td><td style="width:20%;">Objet</td><td style="width:10%;">Date</td><td style="width:20%;">Personne traitante</td><td style="width:30%;">Commentaire</td>
	</tr><tr>
		<td></td><td></td><td></td><td></td><td></td>

	</tr><tr>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
</table></div>
			</div>
		</form>
	</body>
</html>


Copiez le code dans un fichier et lancez le sous IE (ok) puis sous Firefox (pas ok). Si on vire le tableau qui est à l'intérieur du DIV, du coup ça marche.
ça y'est j'ai trouvé.
J'ai laissé par inadvertance un float:left sur le div de droite. Smiley boulet
Merci pour les conseils Smiley clapclap
djflex68 a écrit :
ça y'est j'ai trouvé.
J'ai laissé par inadvertance un float:left sur le div de droite. Smiley boulet
Merci pour les conseils Smiley clapclap


Bravo. N'oublie pas d'ajouter [Résolu] dans le titre du sujet (FAQ)

Et tant qu'à faire, il y a moyen de nettoyer le code de la page, il n'y a que des classes employées alors que des id seraient plus appropriés Smiley ohwell
oui mais le code n'est pas propre, c'est un copier-coller de plusieurs trucs générés..
Par contre, je me rends compte qu'il me laisse un tout petit espace de 1 ou 2 pixels entre le div de gauche (celui en float) et le div de droite. Cet espace n'est que sous IE, pas sous firefox. J'ai essayé de le virer en mettant 
margin:0
ou 
padding:0
mais rien n'y fait. Idée ?
Bonsoir,

Faire une recherche sur "three pixels jog" dans le forum. Cet espace lié au dimensionnement du bloc en flux est inévitable. Il peut parfois être "masqué" en supprimant le dimensionnement, ou en jouant sur des marges négatives et/ou des positions relatives.
Je me permets de rebondir à nouveau sur mon post.
Imaginons une colonne de largeur fixe à gauche et une colonne devant prendre le reste de la page en largeur.
La solution proposée dans ce post a été de supprimer tout attribut de positionnement. Cela permet effectivement d'avoir une colonne de droite qui s'étend par défaut sur le reste de la page. Mais celle-ci ne possède alors pas de largeur assignée.
Résultat : si on met un tableau à l'intérieur de la colonne de droite (celle dont on a pas spécifié de largeur), et qu'on assigne à ce tableau une largeur bien définie (à tout hasard 100% pour qu'il prenne toute la largeur de la colonne), eh bien sous IE ça ne pose pas de problème tandis que sous Firefox, il considère que ce 100% réprésente 100% de la page, et donc ça déborde.
Quelqu'un entrevoit une solution dans ce monde de brutes ? Smiley sweatdrop
Salut

Quitte à me répéter, je dirai que si tu as donné une marge suffisante du côté gauche à ta colonne de droite, ça n'arrivera pas.
Je ne suis pas sûr de bien comprendre l'hisoire des marges.
Toujours étant que j'ai fait un petit test :
Si je mets un DIV à 100% de largeur à l'intérieur de la colonne de droite (celle qui prend le restant de la largeur), et que je mets mon tableau à l'intérieur de ce DIV, eh bien c'est très curieux car le DIV s'arrête bien à la largeur de la page, alors que le tableau lui déborde du div (il fait 100% de la page, il s'en fiche bien d'être dans un div ou non) Smiley sweatdrop Smiley sweatdrop
Sujet clos
Aller à