Bonjour,
 
Débutant en CSS, je n'arrive pas à résoudre un problème qui vous semblera probablement trivial.
 
Soient deux conteneurs #conteneur1{position:relative;display:block;width:100%;} et #conteneur2 (idem) qui se suivent verticalement.
 
J'ai besoin d'inscrire dans #conteneur1 deux contenus alignés (#bloc1 et #bloc2) tels que:
- #bloc1 possède une largeur absolue (width:150px) et une hauteur automatique;
- #bloc2 dispose de la largeur restant (100%-150px) et possède une hauteur automatique;
- #conteneur1 reçoive la hauteur maxi(#bloc1,#bloc2) -- de telle sorte que #conteneur2 s'empile derrière.
 
C'est donc une structure bateau du genre:
 

 
Mon problème est que je n'arrive pas à spécifier les paramètres position et display de #bloc1 et #bloc2. En effet:
 
- avec {display:inline}, j'obtiens l'enchaînement horizontal mais la propriété {width:150px} n'est pas opérationnelle pour #bloc1 : sa largeur est automatique (intrinsèquement calculée). Je pourrais peut-être repositionner #bloc2 {position:relative?/absolute?;left:150px;} mais je perdrais de toute façon la surface et le background réel de #bloc1 ;
 
- avec {display:block}, je peux affecter un width aux blocs et tricher avec {position:absolute;} pour les placer à la suite -- #bloc1{left:0;top:0} et #bloc2{left:150px;top:0} --, mais alors la hauteur "finale" de #conteneur1 devient nulle car la spécificiation {position:absolute;} a retiré #bloc1 et #bloc2 du "flux normal". Du coup, #conteneur2 ne suit plus #conteneur1 mais le chevauche salement.
 
Je suppose qu'il y a une meilleure alternative (et j'aimerais éviter de tricher avec margin de #bloc2). Connaissez-vous une solution en pur positionnement de blocs?
 
Merci d'aider un newbie.

Je pense que tu peux utiliser un div contenant 2 spans pour resoudre ton problème
tu peux specifier pour chaque span leurs dimensions
 
dans les grandes lignes:
 
div.container span.bloc1 {
 float: left;
 width: 150px;
}
 
div.container span.bloc2 {
float: right;
width: 200px;
}
dans le CSS
 
et  
<div class="container">
<span class="bloc1">contenu1</span>
<span class="bloc2">contenu2</span>
</div>
 
en HTML
 

Merci MrFredG pour ta suggestion.
 
Ca ne semble pas fonctionner chez moi. Si je remplis bloc1 et bloc2 avec du contenu multiligne, bloc2 n'est plus en face de bloc1 mais repoussé vers le bas (tout en restant aligné à droite).
 
Par ailleurs, la solution des flottants n'est pas très praticable puisque la taille de bloc2 (qui devrait être l'espace restant à droite de bloc1) devient incalculable, sauf à faire des contorsions.
 
Je vais continuer à gamberger. Je suis très étonné que ce problème tout bête n'ait pas de solution simple...
 
Merci quand même.

comme au thread voisin je ne peux que te conseiller de lire ces articles , tu y trouveras certainement la lumière :
http://www.openweb.eu.org/articles/initiation_float/

 
Certes, les flottants permettent de ruser un peu:
 
#bloc1{float:left;width:150px;}
#bloc2{float:left;}
 
est la seule solution *vaguement* satisfaisante.
 
Je note que laisser #bloc2 en flux normal le ferait courir sous #bloc1 quand height2>height1, ce qui n'est pas du tout l'objectif.
 
Toutes les tentatives de positionnement de #bloc2 (relatif, absolu) sont visiblement aberrantes avec #bloc1 flottant.
 
Reste que la solution *vaguement* satisfaisante ne permet pas de fixer correctement width de #bloc2 pour qu'il remplisse "de force" la largeur restante (un background montre bien que c'est la largeur intrinsèque du contenu qui est retenue).
D'autre part, les hauteurs des 2 blocs sont hétérogènes (idem, ça se voit avec le background), ce qui là encore ne satisfait pas le "cahier des charges".
 
Bref, après avoir cogité toute la journée, pas de solution pour ce problème "trivial" ! Il n'y a plus qu'à se rabattre sur une table HTML, je crois...
 
Merci encore pour ton aide, MrFredG.

Bonjour,
As-tu éssayé  
#bloc1 {
position: absolute;
left:0;
width: 150px;
}
#bloc2 {
margin-left: 150px;
}
Bon courage

 
Oui, c'est la technique que je voulais éviter -- avec margin. J'ai cru comprendre que le modèle de boîtes de Microsoft créait des merdes en permanence dans les calculs de width avec margin/border/padding. Et puis je préfère tenir pour indépendante la question des marges et espacements internes de #bloc1 et #bloc2, qui à mon sens ne devrait pas se mélanger avec le positionnement.
 
POUR INFO :
 
Le problème initial est décidément un problème de "table". Je peux encore éviter de baliser cette table en HTML (puisque la philosophie CSS tend à proscrire cet acte sacrilège) en utilisant la formule miracle suivante:
 
#conteneur{display:table; /*etc.*/}
#bloc1{display:table-cell; /*etc.*/}
#bloc2{display:table-cell; /*etc.*/}
 
Mais voilà, IE ne reconnaît pas cette attribution. Alors je pensais à une sorte de "hack" (très humblement) dans lequel les navigs connaissant display:table se comportent en "hauteurs homogènes" (table) tandis qu'IE, c'est un moindre mal, verrait encore des blocs selon la solution suggérée par MrFredG (les flottants).
 
Au final, ça ferait un truc du genre:

 
...mais je ne sais pas du tout si ça marche avec tous les navigateurs.

Sinon rien ne t empeche de charger un CSS specifique a IE et un autre pour les autres navigateurs.