Bonjour à tous,
Je rencontre un blocage sur un point qui ne me paraît pourtant pas sorcier, mais je n'arrive pas à trouver la bonne méthode...
J'ai la structure de page suivante à construire, uniquement avec des divs (pas de table) :
- une colonne de gauche, qui fait 230px de large et toute la hauteur de la page (width:230px;height:100%)
- une zone à droite de cette colonne, qui doit prendre 100% de l'espace restant (largeur non fixée) et toute la hauteur de la page (width:100%;height:100%). C'est cette zone qui doit s'adapter à la largeur de la fenêtre, et non pas la colonne de gauche.
- cette zone de droite contient elle-même 2 divs : une barre de titre (width:100%;height:50px) et la zone de contenu (width:100%;height:100%)
Rien de compliqué a priori, sauf que je ne me retrouve jamais avec le résultat que je veux en terme de largeur (pas de souci avec la hauteur). J'ai tenté les position:absolute, les float:left, etc., ça ne va jamais.
Quand j'indique 100%, je veux obtenir les 100% de l'espace restant et non pas de l'espace complet de la fenêtre bien sûr.
Une bonne âme pour m'aider à me dépatouiller de ça ?
Merci !
Je vous joins mon code actuel (css en attributs)
Je rencontre un blocage sur un point qui ne me paraît pourtant pas sorcier, mais je n'arrive pas à trouver la bonne méthode...
J'ai la structure de page suivante à construire, uniquement avec des divs (pas de table) :
- une colonne de gauche, qui fait 230px de large et toute la hauteur de la page (width:230px;height:100%)
- une zone à droite de cette colonne, qui doit prendre 100% de l'espace restant (largeur non fixée) et toute la hauteur de la page (width:100%;height:100%). C'est cette zone qui doit s'adapter à la largeur de la fenêtre, et non pas la colonne de gauche.
- cette zone de droite contient elle-même 2 divs : une barre de titre (width:100%;height:50px) et la zone de contenu (width:100%;height:100%)
Rien de compliqué a priori, sauf que je ne me retrouve jamais avec le résultat que je veux en terme de largeur (pas de souci avec la hauteur). J'ai tenté les position:absolute, les float:left, etc., ça ne va jamais.
Quand j'indique 100%, je veux obtenir les 100% de l'espace restant et non pas de l'espace complet de la fenêtre bien sûr.
Une bonne âme pour m'aider à me dépatouiller de ça ?
Merci !
Je vous joins mon code actuel (css en attributs)
<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0;padding:0;height:100%">
<div style="position:relative;float:left;width:230px;height:100%;background-color:#242a29">Colonne gauche</div>
<div style="position:relative;float:left;width:100%;height:100%">
<div style="position:relative;width:100%;height:50px;background-color:#2486d9;text-align:center">Barre de titre</div>
<div style="position:relative;width:100%;height:100%;background-color:#fff">Contenu de la page</div>
</div>
</body>
</html>