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

**codefalse** · 31/10/2008, 02h36

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 !

**HiRoN** · 31/10/2008, 10h32

Le code (X)HTML & CSS serait le bienvenu pour t'aider avec + de précisions.

**yjuliet** · 31/10/2008, 10h33

Pour le contenu, tu n'es pas forcé d'utiliser le "float: left".

Tu peux aussi essayer de le positionner différemment : au lieu de définir la largeur, tu peux définir la position à droite à l'aide de "right: 0;" ce qui fera simplement positionner la limite droite de ton objet à fond à droite.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#moncontenu {
  position: relative;
  left: 0;
  right: 0;
}

Le reste dépendra de la mise en page globale.

Pour bien apprendre CSS suis ces excellents tutoriels et cours de formation CSS : http://css.developpez.com/cours/

**devyan** · 31/10/2008, 11h24

Envoyé par codefalse

...
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é).
...

Salut, as-tu essayé un simple "width:auto" sur ton second élément ?

**codefalse** · 31/10/2008, 12h03

Honnêtement j'ai un peu essayé de tout ! :p

Pour faire simple voici le html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
...
<body>
   <div id="menu">
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
   </ul>
   </div>
   <div id="content">
       blahblahblah
   </div>
</body>

et mon css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
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
Je teste ta méthode yjuliet, jte redit ca !
@HiRoN : je n'avais pas mis de code html/css car c'était vraiment très basique comme mise en page, c'est pour ca.

**HiRoN** · 31/10/2008, 12h17

Envoyé par codefalse

@HiRoN : je n'avais pas mis de code html/css car c'était vraiment très basique comme mise en page, c'est pour ca.

Il est toujours important de fournir le code, aussi basique soit-il.
Il existe moultes façons de coder, chacun ayant ses préférences et sa façon de faire. De plus, dans certains cas, cela permet de détecter l'ajout d'éléments inutiles, de propriétés mal placées, comprendre la logique de la structure &...

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

CSS

Discussions similaires

Partager

Partager