Div qui prends toute la longueur restante après un float

Question

Bonjour à tous ! :)

Voila, je suis bien bloqué depuis un moment, alors je viens à votre aide ! :)

J'ai une div#menu, et une div#content, j'aimerai placer #content à droite de #menu.
Très simple pour cela, fait un float:left à mes deux éléments.

Youhouhou, ca marche. Le problème, c'est que maintenant, mon div#content ne prends plus toute la page mais se limite à la taille indiquée par son contenu (ou un éventuel width indiqué).
Le truc c'est que j'aimerai bien qu'il prenne toute la longueur de la page, peux importe la taille de cette page.
J'ai bien tenté le pourcentage, mais sans compter que c'est un peu aléatoire en fonction des navigateurs, ca peux parfois détruire le design si on réduit/agrandi trop la page.

Je m'en retourne donc à votre savoir pour m'éclairer :)

Merci infiniment !

http://www.ReFlectiv.Net

cs_aKheNathOn · Answer

peux-tu nous donner la définition css du content et du menu ainsi qu'éventuellement le flux html pour voir où ton content est imbriqué.

aKheNAtHoN

cs_TropNul · Answer

Bonjour,

Il me semble qu'en définissant les properties "left" ou/et "right", ayant justement attrait à la position d'un objet, ça fixera la position, qu'elle qu'en soit la taille. 

En d'autres mots, ça rendra 'fluide' le design.

Cordialement

codefalse · Answer

@Akhenathon : La mise en page est très simple, c'est pour ca que je n'ai pas pensé à la mettre, mais la voici quand meme : ...

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

blahblahblah et mon css : html, body {margin: 0; padding: 0;} #menu {float: left; min-height: 350px; background-color: #bbb;} #content {float: left; ... un peu de tout ... et de rien ...} Voila ! :s Jvais tester la méthode des right/left/relative et je vous dit ca! http://www.ReFlectiv.Net

cs_aKheNathOn · Answer

AHHH, je voyais ton menu dans ton content - du coup je comprenait pas.

Essayes ceci :

#menu {float: left; width: 20%; ...}
#content {float: left; width: 80%; ...}

ça devrait faire du 100% de la page - mais si tu veux un truc centré à 80% au total de la page tu peux les mettre dans un div supérieur.

aKheNAtHoN

codefalse · Answer

Le truc que j'ai pas précisé, honte à moi, c'est que la longueur du menu peux varier, c'est ca qui me dérange.
Car à la base j'avais fait un float:left juste sur le menu et un margin-left: 300px pour le contenu, et hop ca marchait, mais quand la longueur du menu grandissais, le content se faisait écraser.

http://www.ReFlectiv.Net

cs_aKheNathOn · Answer

Bon alors tu fais un frameset avec deux frames ... dans l'une ton menu, dans l'autre le contenu ... NAN, je déconne 

    

      

        

          Mon menu 
        

        

          Mon contenu
        

      

    

Le width du menu c'est la taille minimale, s'il lui en faut plus il saura s'agrandir en fonction et pousser le contenu -- comme un tableau normal quoi ...

aKheNAtHoN

codefalse · Answer

Non, en fait je vais faire autrement, les iframes, c'est super ! je connaissais pas !

.... bon ..ok ... jdéconne ;)

Nikel ta proposition, c'est ce qu'il me fallait ! :)
Merci bien ! :)

http://www.ReFlectiv.Net

cs_TropNul · Answer

Sympa le 'display' en format 'table'. Je ne connaissais pas encore. :)

Merci aKheNAtHoN !

Cordialement

codefalse · Answer

Par contre je viens de me rendre compte que ca ne fonctionne pas pour IE (argl).
Comment fait-on dans ce cas ? :p

http://www.ReFlectiv.Net

Div qui prends toute la longueur restante après un float

9 réponses

Votre réponse

Discussions similaires