[Résolu] Px + % ???

Bon peut etre que je me prends la tete pour pas grand chose...

Je cherche à faire sans y arriver :
une colonne de 200px à gauche et une autre à coté qui prend le reste de la largeur de l'écran.

Voila et j'y arrive pas et ça m'énerve !!!

Si qqun voit comment procèder, un grand merci d'avance.
Modifié par samowm (29 Mar 2007 - 15:29)

Sans trouver de réponse sur ce forum, j'ai cherché sur google et j'ai trouvé la réponse, sur ce forum avec un lien donné par google !
http://forum.alsacreations.com/topic-4-22957-1-Colonne-en-pourcentage-et-une-en-pixel.html

Désolé du coup pour ce message posté trop vite...

samowm a écrit :
Je cherche à faire sans y arriver :
une colonne de 200px à gauche et une autre à coté qui prend le reste de la largeur de l'écran.

Hello et bienvenue,

A priori, tu n'as pas pris le temps de lire les bases du positionnement en CSS

En fait, la solution est très simple. Il suffit de jouer avec les données suivantes (à apprendre dans les tutoriels de base) :
- un élément de type bloc occupe toujours et par défaut toute la largeur restante dans le conteneur
- pour placer deux éléments côte à côte, il existe plusieurs méthodes de positionnement (cf lien ci-dessus). Je te conseille ici le positionnement flottant.

En clair :
- ton élément A : positionnement flottant à gauche + largeur 200px
- ton élément B : ... tu n'as rien à faire, il va se placer à droite de A et occuper la largeur restante.

samowm a écrit :
Sans trouver de réponse sur ce forum, j'ai cherché sur google et j'ai trouvé la réponse, sur ce forum avec un lien donné par google !
http://forum.alsacreations.com/topic-4-22957-1-Colonne-en-pourcentage-et-une-en-pixel.html

Désolé du coup pour ce message posté trop vite...

Dans ton cas, il est inutile (voire dangereux) de préciser une largeur en pixel. Cela va complexifier les choses surtout si tu rajoutes des marges aux blocs.

Démonstration :

#bloca {
  float: left;
  width: 200px;
  background: red;
}
#blocb {
  background: yellow;
}

  <div id="bloca">BLOC A</div>
  <div id="blocb">BLOC B</div>

Et hop !