Étirer une div au maximum + combiner px et %

Bonjour,

J'ai deux problemes :

1) Une div s'accorde par defaut a la largeur de son contenu. Peut-on faire en sorte qu'elle occupe la place maximale qui lui est accordee par son parent ?

2) Comment combiner deux div cote a cote, une avec une taille fixe et l'autre en occupant le maximum de place, pour qu'elle et sa voisine occupent 100% ?

Pour illustrer :

<div class="container">
<div class="class1"></div><div class="class2"></div>
</div>

.container { width:1000px; }
.class1, .class2 { float:left; }
.class1 { ? }
.class2 { width:400px; }

Je voudrais que la div class1 prenne le maximum de place pour que la div class1 et la div class2 fassent le macimum du container, soit 1000px.

Si l'ecran fait plus de 1000px, alors div class1 fait 600px. Par contre, si l'ecran fait 800px de largeur, alors elle devra faire 400px de largeur...

Si je mets un pourcentage sur la div 1 maintenant, si l'ecran est petit, la div2 va se placer en dessous de la div 1, et je les veux a cote...

Merci d'avance =)
Modifié par LightBen (13 Sep 2012 - 12:42)

tu peux utiliser la propriété display:table; sur ta div container et des propriétés table-cell; sur tes autres div. Si tu indiques une largeur en px à ta première div, l'autre remplira automatiquement l'espace restant.

Par contre, je ne sais pas si c'est conseillé d'imbriquer tes deux div en table-cell dans une autre div avec la propriété table-row. Si y a un expert qui le sait, ça m'intéresse

Salut,

Je dirais plutôt :

<div class="container">
   <div class="class1"></div>
   <div class="class2"></div>
</div>

.container {width:1000px;} /*ou en % si tu veux adaptable*/
.class1{ float:left; width:400px;} /*la colonne fait 400px et se quiche a gauche*/
.class2 { padding:0 0 0 400px;} /*Pas de float, comportement normal la div2 va prendre toute la largeur et la div 1 va pousser le contenu de la div2 car en float. Le padding n'est pas obligatoire tant que la div2 ne dépasse pas la div1 en hauteur*/

Un design fluide avec trois «colonnes», grâce au positionnement flottant
Modifié par _laurent (13 Sep 2012 - 15:35)

Et

LightBen a écrit :
1) Une div s'accorde par defaut a la largeur de son contenu. [...]

FAUX

LightBen a écrit :
[...] Peut-on faire en sorte qu'elle occupe la place maximale qui lui est accordee par son parent ?

C'est le comportement par défaut.

_laurent a écrit :
Et



FAUX



C'est le comportement par défaut.

Sauf que là , c'est la flottante qui doit être fluide.

Je te propose une technique brutale et primitive que j'évoque de façon récurrente (au moins une fois tout les 3 mois depuis ... 2006 ?)

Cette technique avec flottant, contexte de formatage (mis au jour ) , et un padding en adéquation avec une marge négative, permet de se réservé un espace determiné au coté d'un flottant qui herite d'un comportement fluide et similaire a un block.

dem: http://dabblet.com/gist/3716487

++

gc-nomade a écrit :
Sauf que là , c'est la flottante qui doit être fluide.

Pourquoi ?
On a deux colonnes, l'une flottante, l'autre non, autant choisir la non flottante pour le fluide... après qu'elle soit a droite ou a gauche... Autant que ce soit pas "brutal et primitif"..
J'ai loupé quelque chose ?
Modifié par _laurent (14 Sep 2012 - 11:01)

heu, oui et non.

La colonne qu'il veut fluide est la premiere , donc du coup flottante . C'est ce qu'il a choisi dans sa recherche de solution.

Comment pourrions nous faire ?

la premiere flottante, la seconde dans le flux.
les deux flottantes
les deux en inline-block.

Ces trois option avec la difficulté de faire en sorte que la seconde ait une taille fixe et que la première remplisse l'espace dispo laisser par la seconde quelque soit la largeur de l'écran.

Tu propose d'inverser le flux du document , pour mettre la seconde en première position, je pense que ça il savait le faire et que cela ne lui convenait pas.

Enfin, display:table et table cell peuvent le faire comme suggérer plus haut, mais exit pour sur les vieux machin. ... J'en suis donc rester a la question initiale: un flottant qui occupe l'espace dispo , le reste etait déjà dit.

Cdt,
GC

++

gc-nomade a écrit :
Ces trois option avec la difficulté de faire en sorte que la seconde ait une taille fixe et que la première remplisse l'espace dispo laisser par la seconde quelque soit la largeur de l'écran.

Je voyais pas ça comme ça.. mais merci pour les précisions !

Merci a vous, j'ai reussi a organiser mes colonnes comme je le souhaitais grace a ces proprietes CSS, en etudiant un peu et en jonglant avec display:table =)

ouep c'est table sur le parent et table-cell sur les enfants