Bloc fixe et bloc auto [Résolu]

Bonjour à tous,

J'ai sur une page web 2 blocs DIV.
Le premier DIV est collé sur le bord droit de l'écran et fait 250px de large.
Mon deuxième DIV prend tout le reste gauche de l'écran en s'adaptant à la résolution du client.
C'est pour ce deuxième que je bloque.
Comment dans ma page de style puis-je avoir une largeur de (100% - 250px)?
Ci-dessous mes deux blocs :

.contenu_gauche
{
	position : absolute;
	top      : 0px;
	left     : 0px;
	width    : ????;    /* idéalement : 100% - 250px */
	height   : 100%;
}

.contenu_droit
{
	position : absolute;
	top      : 0px;
	right    : 0px;
	width    : 250px;
	height   : 100%;
}

Merci pour vos lumières alsacréatrices
Modifié par axou (09 Dec 2009 - 17:15)

Hello axou et bienvenue ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.


Concernant ta question le principal problème est de partir sur du positionnement absolu alors que ça n'est pas sans conséquence. (Re)lire avec attention (= en suivant les liens) le Guide de survie du positionnement CSS.

Pour placer des éléments de type bloc côte à côte il suffit d'utiliser le positionnement flottant.

Tout d'abord, merci pour l'accueil et désolé d'avoir un peu foncé tête baissée pour poster

Tu avais raison, utilser FLOAT était la solution. Je l'avait essayée mais j'avais déclarer dans ma page HTML le bloc flottant de droite après le bloc de gauche. Ce qui avait pour effet de les mettre l'un au dessus de l'autre.

En tout cas t'es liens m'ont bien aidés à résoudre ce problème et à mieux comprendre l'utilisation de FLOAT.

.contenu_gauche
{
	top      : 0px;
	left     : 0px;
	width    : 100%;
	height   : 100%;
}

.contenu_droit
{
	float    : right;
	width    : 250px;
	height   : 100%;
}

Merci !
Modifié par axou (09 Dec 2009 - 18:11)

De rien !

A noter que pour des éléments de type bloc width: 100% est inutile puisqu'ils vont par défaut prendre toute la largeur disponible. D'autre part top et left ne servent plus à rien puisque .contenu_gauche n'est plus positionné.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.