Mélange des pourcentages et des pixels.

Bonjour à tous,

Pour certains site et c'est le cas pour le miens, je n'utilise quasiment que des DIV avec des WIDTH en pourcentage. Ce que je veux dire, c'est que si dans le contenu j'ai trois DIV à aligner, je fais :

#div1 {
width: 30%;
float: left
}
#div2 {
width: 30%;
float: left
}
#div3 {
width: 40%;
float: left
}

Et ensuite je crée une autre DIV avec un "CLEAR:BOTH". Cependant, comment gérer les marges et bordures ? Car forcément, ça décale toutes mes DIV et la dernière se retrouve en dessous. Les marges à la rigueur, je peux également les mesurer en pourcentage, mais les bordures c'est impossible ... je dois donc mettre des WIDTH assez aléatoire, comme 28% ou 38%. Et, évidemment, en fonction de la résolution, ça buggera sur certains ordinateurs ...

Bref, savez-vous comment résoudre ce soucis ?
Merci d'avance,
Gaylord.P.

Salut,

Tout d'abord je dois te conseiller cet article.

Donc, je te conseil d'utiliser inline-block, ca ne résoudra pas ton problème, mais au moins ca t'évitera de devoir écrire un div vide de sens sémantique juste pour annuler le float.

Sinon je comprend pas la question, c'est normal le fait de passer à la ligne si ton contenu fais plus de 100% de la largeur du div conteneur.

Enfin si je comprend bien la question, il te faut calculer la taille de boite en prenant en compte leurs marges extérieurs et intérieurs, leurs bordures, et bien sure leurs largueurs, et ainsi ne pas dépasser la taille des 100% (je n'utilise jamais les % personnellement mais bon ^^)

Et tu peux franchement mettre ta border en px, je ne vois pas l'intérêt de la mettre en %, je me trompe peut être mais je n'ai jamais vu cette pratique ^^

En espérant t'avoir aidé,

Bonne soirée

Merci pour ta réponse.

Mais dans mon exemple, ou je souhaite avoir trois DIV cote à cote qui prennent, à eux trois, toutes la largeur de la page, comment puis-je faire ? Si je rajoute une bordure, ça décale tout ... la question me semble tellement simple que j'ai du mal à croire qu'il n'y ait pas de solution :s

Encore merci

Oui c'est normal car la bordure est comprise dans le calcule du modèle de boite, si tu veux par exemple mettre une bordure de 1% il faudra retiré 2% sur chaque width de chaque boite (bordure à gauche et a droite)

en clair si tu met ton width à 30% et ensuite que tu leurs applique une bordure de 1% la largeur total de ton div sera alors de 32% ^^

J'espère que ca t'éclaire un peu ^^

Voici un article qui pourra peut-être t'aider à mieux appréhender la chose

A bientôt

Encore merci pour ta réponse, j'avais bien compris ça. Mais le soucis est bien : si je veux mettre une bordure de 1 pixel, comment faire pour que les DIV ne se décale pas ? (puisqu'elle prendront 100% de page, plus 6pixels ...)

Encore merci

Le plus simple est d’utiliser provisoirement la balise <table> pour ta mise en page. Ensuite quand tout est au point, tu remplaces les balises <table>, <tr>, <td>… par des div auxquelles tu associes la css par défaut de Firefox des balises <table>&compagnie

Arf, utiliser des hack ... j'arrive pas à croire que rien n'est était prévu pour une fonctionnalité aussi basique que ça. La mise en page en pourcentage, c'est quand même du basique de chez basique ... Donc si je comprends bien, si on commence à coder en pourcentages, exemple avec un des gabarits minimalistes alsacreations :
http://www.alsacreations.com/static/gabarits/modele05.html
... jamais on ne pourra, dans le cadre principal, dissocier d'autres cadres en pourcentages avec des bordures ? Comme par exemple, à l'intérieur, mettre :

div1.div2.div3
.......div4......

Autant retourner au codage 100% table car moi, mon objectif, c'est certes de code propre, mais avant tout d'avoir la mise en page que je souhaite ...

Bonjour, avant de penser mise en page tableau, il faut réfléchir un peu à ce que tu veux obtenir.

Serait-ce possible dans ton cas que seulement les deux colonnes de gauche et droite soient en % et que la colonne du milieu prenne le reste de la place sans que l'on y attribue une largeur ?
Ça revient pas mal au même que de dire gauche=20%, droite=20% et centre=60%...

Tu pourrais ainsi mettre les bordures dont tu parles.

bonjour,

sinon, les deux premier en float et le dernier dans le flux en modifiant son contexte de formatage :

#div1 { 
width: 30%; 
border:solid;
float: left 
} 
#div2 { 
width: 30%; 
border:solid;
float: left 
} 
#div3 { 
width:auto;/* pas de taille a définir, prend ce qui reste tout simplement */
border:solid;
overflow:hidden;
zoom:1;/* correctif IE7 et inf */
} 

Il n'y a pas a calculé les largeurs ni a modifié le modèle de boite pour caser tout ça .
(reste le bug des 3 pixels eventuellement a corrigé pour IE6 ...)

Cordialement,
GC

Tu peux éventuellement utiliser la propriété css3 "box-sizing", qui sera reconnue par tous les navigateurs exceptés IE7 et inférieurs. Elle te permet de spécifier si tes bordures (et tes paddings) sont pris en compte dans la largeur de ta boîte ou pas.

http://www.css3.info/preview/box-sizing/

Sinon, tu pourrais simplement faire en sorte que les largeurs ajoutées de tes div n'atteignent jamais les 100% (28% + 28% + 38% par exemple), ainsi il y aura toujours de l'espace pour tes bordures, et si ta page s'étire ou se réduit, l'espace entre les div s'étirera ou réduira en même temps.

gc-nomade a écrit :
... ni a modifié le modèle de boite pour caser tout ça ....

Ten a écrit :
... Tu peux éventuellement utiliser la propriété css3 "box-sizing", ....

Oui mais non pourquoi compliqué quand ça se peut se faire tout seul ?

Gaylord.P a écrit :
...Cependant, comment gérer les marges et bordures ?....

en effet, width % + margin px ... pas sur que box-sixing va gerer ça .

width,border + margin par exemples:

#div1 { 
width: 30%; 
border:solid 5px;
float: left 
} 
#div2 { 
width: 30%; 
border:outset 2px;
margin:0 15px 0 2%;
float: left 
} 
#div3 { 
width:auto;/* pas de taille a définir, prend ce qui reste tout simplement */
border:double 7px;
margin:2%;
/* contexte de formatage/layout */
overflow:hidden;
zoom:1;/* correctif IE7 et inf */
}

Avec si peut d'info données par Gaylord.P, je m'en suis tenu a ses float. Pour aligner 3 elements horizontalement il y a d'autres maniere de faire selon les resultats voulu et navigateurs ciblés(display, column, float, ....)

Cordialement , GC

Encore merci à tous, même si j'ai toujours réellement du mal à croire que rien de propre n'ait été créé, depuis le temps que CSS existe !

Et malheureusement, aucune solution ne convient ... j'ai créé deux pages hyper simples pour vous présenter mes tests, en passant par les "inline-block" qui semblent recommandés (mais les soucis sont les même, que ce soit avec display ou float) :
- http://www.widjoo.com/test.html : deux DIV à 50%, qui se retrouvent une en dessous de l'autre ...
- http://www.widjoo.com/testbis.html : une DIV à 50% et l'autre sans width comme vous me l'avez conseillé, mais celle-ci du coup ne prend pas toute la largeur de la page ...

Des idées ?
Merci
Modifié par Gaylord.P (12 Feb 2011 - 01:33)

oui

si aucune marge externe alors inline-block ou float + box-sizing:border-box;
sur tout les elements, mais ça ne passe que sur peu de navigateur.

sinon, ce que je te propose:

#div1 {
	width: 50%;
	background: blue;
	border: 1px solid #000000;
	margin: 0;
float:left;
}
#div2 {/* pas float, pas width*/
	background: red;
	border: 1px solid #000000;
overflow:hidden;
}

Il n' y a que le dernier élément a laisser dans le flux sans le dimensionner, il prendra naturellement la place qui reste, ... pas possible de proposer plus simple.

GC

Merci merci, ça commence à devenir potable ...

Ceci-dit cette solution exclue totalement l'emploi de margin ... aucune autre possibilité permettant d'employer les fonctionnalités de base de CSS ?

heu non justement,

as tu essayé l'exemple précèdent que je te donnais ? apparement non, d'ou l'incomprehension j'imagine.

à copier coller

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title>
<style type='text/css'>#div1 {  
width: 30%;  
border:solid 5px;
background:yellow;
float: left  
}  
#div2 {  
width: 30%;  
background:red;
border:outset 2px; 
margin:0 15px 0 2%; 
float: left  
}  
#div3 {  
background:green;
width:auto;/* pas de taille a définir, prend ce qui reste tout simplement */ 
border:double 7px; 
margin:2%; 
/* contexte de formatage/layout */ 
overflow:hidden; 
zoom:1;/* correctif IE7 et inf */ 
}</style>
</head>
<body>
<div id="div1">	 Zone ou section	</div>
<div id="div2">	 Zone ou section	</div>
<div id="div3">	 Zone ou section	</div>
</body>
</html>

Il me semblait avoir testé tous les exemples et que ça ne fonctionnait pas totalement comme je le voulais :s

Je suis arrivé à un résultat des plus corrects en utilisant deux DIV en 50% et, à l'intérieur de chacune, une DIV sur laquelle je peux mettre une bordure sans aucun soucis, mais aussi des marges.

http://www.widjoo.com/test3.html

Les avantages :
- Pas d'utilisation du float, mais de display comme recommandé ;
- Border & margin sans aucun soucis, gestion de 100% de la page
Inconvénient :
- Il y a deux DIV pour un seul élément ...

Qu'en pensez-vous ?
Ca me semble un bon compromis non ?
Modifié par Gaylord.P (12 Feb 2011 - 16:59)

c'est comme tu veut.
Ta page de test ne passe pas dans IE8 chez moi.

A mons sens width + inline-block ne sont pas adapté dans ton cas, sans compter le comportement de IE7(et moins) incompatible selon ta feuille de style.

je n'interviendrais plus sur ce topic, considerant déjà avoir expliqué et démontrer la simplicité et la pertinence de la solution proposée.

Bonne chance, Cordialement,

GC