Bonjour,
 
J'essaye de placer des div en ayant pour but d'avoir 4 blocs de taille différente qui se touchent sans se recouvrir.
Les tailles sont relatives pour s'adapter à la taille de la fenêtre.
 

• Haut-gauche : InfoWtitle, orange, 85% de large, 15% de haut (redimensionné à 10% pour tester)
• Haut-droit : InfoWright, jaune, 15% de large, 15% de haut (redimensionné à 10% pour tester)
• Bas-gauche : ControlsW, vert, 20% de large, 85% de haut
• Bas-droit : MainW, bleu, 80% de large, 85% de haut

 
Le bloc vert en bas à gauche ne fait pas ce que je veux, et c'est possible que les autres blocs ne soit pas exactement à leur place .
 
J'ai hésité entre "position: fixed" et "position: absolute", en théorie ça ne devrait rien changer puisque tout doit tenir sur une page, mais "position: absolute" me place des trucs en dehors et permet de scroller.
 
Le positionnement par rapport au coin haut-gauche ou par rapport aux extrémités ne change pas le comportement.
 
Ai-je fait une erreur de débutant évidente ?
 
Y-a-t'il un moyen d'afficher une grille exacte avec un quadrillage tous les 10% ou tous les 10px pour comprendre plus facilement (LaTeX le fait ) ?
 
J'ai simplifié le code le temps pour tester et essayer comprendre :  

Tu devrais utiliser un reset css (pour unifier / margin / padding et boxmodel), ça devrait aider.
https://meyerweb.com/eric/tools/css/reset/reset.css
 
Peut on savoir la destination de ton truc ?
Pacque si c'est destiné à un projet perso sur un écran dont tu connais la taille, ce sera sans doute plus simple de tout faire en pixel en position absolute top left avec une width / height en pixel.
 
Par contre si tu souhaites rester responsive (s'adapter à des tailles d'écran différente), tu aura plus de flexibilité avec Flexbox.

Merci, j'ai forcé les paramètres margin et padding à 0 dans le CSS, je pensais que c'était le cas par défaut .
 
Mon truc est un media-center. Je veux justement un responsive design parce que je trouve l'idée de tout forcer en dur pas très élégante .
 
Je note pour Flexbox . Ça ressemble pas mal aux QH/VBoxLayout de Qt, j'ai l'impression que Grid correspond mieux à mon cas .

Je dirais surtout qu'il devrait utiliser les flexbox du CSS : https://developer.mozilla.org/fr/do [...] of_Flexbox
Ca va lui simplifier la vie plutôt que partir sur du position: fixed / absolute qui date des années 2000
 
Edit : a pas vu le lien Flexbox posté par mechkurt

Ça dépend surtout du niveau technique de la personne et de la destination final de son rpojet...
 
Pour quelqu'un qui ne veut pas se prendre la tête et un résultat rapide sans trop d'effort, la simplicité du dimensionnement au pixel près avec avoir lut un paragraphe de doc et remplis 4 propriétés css (5 en contant le position:absolute; ^^) est juste imbattable.

le truc va s'afficher sur quoi comme navigateurs ?  

Je développe le bouzin sur un PC avec Firefox dont je trouve le debugger pratique.

La cible n'est pas clairement définie pour l'instant, j'hésite entre Firefox ou Konqueror/Webkit avec Linux et Firefox Mobile avec Android. Ça dépendra surtout des performances du bouzin.
Je peux faire des hacks moches en fonction de la taille de l'écran, mais j'aimerais éviter pour le moment .

Je plussoie le coup d'un système KISS, surtout ici où c'est relativement simple et hiérarchisé.
La partie en bleu a potentiellement du bordel dedans, mais pour l'instant ça rentre bien .

bon du coup ton truc en positions absolute c'est plus ou moins la bonne chose à faire.
A la rigueur en flexbox c'était troché sans trop de bricolage.
 
Pour information quand tu utilises des margin-top ou margin-bottom (padding aussi), si tu mes des % dans les valeurs, ils dépendent de la largeur de leur parent, donc ce n'est pas une bonne idée.
Utilise, top, right, left et bottom pour placer tes éléments.@

C'est vite torché avec grid aussi.

ouais mais regarde son navigateur de destination

Konqueror ne supporte pas les grid css ou c'est la version du navigateur du media-center dont tu supposes qu'elle ne supportera pas les grid css ?
Parce que Konqueror est censé supporter le css3 et donc les grid (définies depuis css2, non?) sans utiliser le webkit.
 
J'ai quelques bières dans le pif donc je te fais confiance. xD

En théorie Konqueror supporte tout le bouzin .
 
Je crois bien que je vais utiliser Flexbox pour améliorer les trucs dans le bloc bleu et peut-être même le bloc vert .
 
D'ailleurs, j'ai découvert l'astuce height: 50vh; pour avoir un truc dépendant de la taille du "viewport".

CSS grid c'est ultra récent et ce n'est pas CSS2, mais CSS3 et implémenté depuis 1 ou 2 ans maxi.
 
Donc flexbox ou alors comme il a fait mais en foutant un overflow:auto sur son div qui contient le contenu de sa page.

Le flottement à droite peut être réglé.