[résolu] 2 divs alignées de largeurs dynamiques

Bonjour à tous,

J'ai fait des tests pendant des heures en vain pour un problème que je ne pense pas très compliqué. Un petit schéma sera le plus parlant:



Je souhaiterais avoir 2 divs alignées.
- div#1 est vide (elle n'a qu'un background) et s'adapte pour occuper la largeur disponible.
- div#2 contient du texte de taille aléatoire (la div s'adapte donc) et le texte peut revenir à la ligne s'il dépasse la largeur du conteneur global.

J'en suis arrivé pour le moment à ceci qui ne provoque pas le comportement souhaité:

<div id="conteneur">
  <div id="div1" >&nbsp;</div>
  <div id="div2" >mon texte de largeur variable </div>
</div>

#conteneur {	display:block; 
			width:100%;}

#div1{	background:purple; 
		display:inline-block;
		position:absolute; 
		left:0;
		margin-right:0;}

#div2{	position:absolute; 
		right:0; 
		margin-left:100px;}

Si vous aviez une piste de solution ça serait formidable !
Peut-être en passant par un tableau mais là non plus je n'ai pas réussi...

Merci d'avance!
Modifié par arriflex (23 Dec 2013 - 17:04)

salut,
il serait peut être préférable que tu prennes le temps pour bien maîtriser le positionnement CSS si tu veux vraiment comprendre ce que tu fais. Le site propose pas mal de choses.
Tu pourrais passer par un "display:inline-block" ou "table-cell" pour ce que tu veux faire.

Hello,

J'ai fait un test avec le float right : http://codepen.io/anon/pen/wFlGK
J'avais aussi pensé au table-cell mais petit soucis de taille pour les cellules : http://codepen.io/anon/pen/IHoLD

Yordi

Zelalsan a écrit :
salut,
il serait peut être préférable que tu prennes le temps pour bien maîtriser le positionnement CSS si tu veux vraiment comprendre ce que tu fais. Le site propose pas mal de choses.
Tu pourrais passer par un "display:inline-block" ou "table-cell" pour ce que tu veux faire.

Bonjour Zelalsan et merci beaucoup pour ton message,

Je n'ai sans doute pas mis le résultat le plus probant de mes tests mais j'ai fait plein d'essais avec les propriétés "display:inline-block" ou "table-cell" sans réussir à obtenir le résultat souhaité.

Les tutos d'Alsacréations font partie des ressources que j'ai le plus consulté et j'y reviens encore souvent .

Mais sur cet exemple je sèche un peu...

Merci beaucoup Yordi pour tes 2 solutions!

La solution avec float right fonctionne bien mais oblige à passer une propriété de background:white et je souhaiterai que cette div soit transparente (or la la div bleue déborde en dessous).

La solution 2 fonctionne si on met width:100% à la div bleue mais alors je il faut ajouter white-space:nowrap à h1 et du coup le texte ne passerait plus à la ligne je crains:
http://codepen.io/anon/pen/hBuFb


Merci en tout cas beaucoup pour ton aide !

Honnêtement je n'ai pas voulu te donner la solution tant c'est simple et basique.
Il faut savoir déjà qu'une <div> est par défaut de type bloc et que par définition, un élément de type bloc prend toute la largeur qui lui est offerte donc

#conteneur {
	display:block; 
	width:100%;
}

ne sert à rien.
Ensuite, combiner un "display:inline-block" et une "position:absolute" ne sert à rien non plus, vu que ton élément sera en "position:absolute". Le "margin-right:0" n'est pas utile non plus.
En gros c'est très simple, ton code se résume à

<div id="conteneur">
	<div id="div1" >&nbsp;</div><!--
 --><div id="div2" >mon texte de largeur variable </div>
</div>

#conteneur>div {
	display:inline-block;
	vertical-align:top;
	width:50%;
}

Bonsir,
tu n'as a priori pas besoin de deux conteneur et un display:inline-block devrait suffire (un float le ferait aussi :
http://codepen.io/gc-nomade/pen/IFiwK

Je comprend que c'est l'enfant qui fait grandir le parent

Merci infiniement gc-nomade pour ta réponse!