problème avec float:left et overflow:auto

22 oct. 2010, 12:04

Bonjour,

soit le code HTML suivant :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>


<style type="text/css">
.blocks {
border:0px;
margin:0 20px 20px 0;
padding:10px;
border:3px solid #a6ce39;
}

/* BLOCK PREVIEW */
#block_preview {
background-color:#FFFFFF;
border:3px solid #a6ce39;
width:420px;
overflow:auto;
}

#preview {
/*max-height: 20px;*/
width:auto;
float:left;
position:relative;

list-style-type:none;
padding:0px;

border:1px solid black;

}

#preview li {
float:left;
}

#preview_text {
padding:0px;

border:1px solid red;
}
#preview_logo {
cursor:move;
width:auto;

border:1px solid green;
width:50px;
height:50px;

background:#00FF00;
}

/* BLOCK PREVIEW END */
</style>

</head>

<body>

<div class="blocks ui-corner-all right" id="block_preview">
	<ul id="preview">
		<li id="preview_logo"></li>
		<li id="preview_text" style="font-size:50px;">Tapez votre texte ici</li>
	</ul>
</div>



</body>
</html>

Qui donne ceci : http://wir3d.net/tests/test.php

J'ai un <ul> de largeur fixe (420px), et en overflow:auto;

Et à l'intérieur, 2 <li>, en float:left;, et dont la somme des largeurs est supérieure à la largeur du <ul>. Ce que je ne comprend pas, c'est pourquoi les <li> se mettent l'un en dessous de l'autre, au lieu de s'aligner l'un sur l'autre, comme le voudrait le float:left; créant ainsi l'overflow.

Que dois-je faire pour arriver à ce résultat ?

22 oct. 2010, 14:03

Salut,
ton bloc #preview n'a pas de dimensions définies ( width: auto; )
Ensuite l'item #preview_text n'a pas non plus de dimensions, donc tant qu'il a de la place pour son contenu, il s'étale en largeur autant que nécessaire.

Enfin, tu as mis l'overflow sur le container et non sur l'item, ce qui, au vu de ce qui précède, n'aurait pas de sens pour ce qui concerne la largeur. Comme tu n'as pas fixé de hauteur pour le container, il va s'agrandir au fur et à mesure des besoins. Si on allonge le contenu de texte, il ne dépassera pas la largeur du bloc container, mais du coup il va s'étendre en hauteur et le container va suivre.

En conclusion, commence par définir les dimensions de tous tes éléments : une dimensions en pixels ou en em voire une dimensions flexible (pas de dimensions du tout). Donc pas juste le container. À partir de là tu pourras définir une propriété overflow sur les éléments dont les dimensions hauteur et largeur auront été définies.

Et au passage, je te suggère une modification qui te donnera des éléments de départ pour tes corrections :

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
      .blocks {
          border:       0px;
          margin:       0 20px 20px 0;
          padding:      10px;
          border:       3px solid #a6ce39;
      }
      /* BLOCK PREVIEW */
      #block_preview {
          background-color: #FFFFFF;
          border:       3px solid #a6ce39;
          width:        420px;
          overflow:     auto;
      }
      #preview {
          width:        auto;
          float:        left;
          position:     relative;
          list-style-type: none;
          padding:      0px;
          border:       1px solid black;
      }
      li.preview_text {
          padding:      0px;
          border:       1px solid red;
          /* Temporaire */
          font-size: 6em;
      }
      span.preview_logo {
          cursor:       move;
          width:        auto;
          border:       1px solid green;
          width:        50px;
          height:       50px;
          background:   #00FF00;
          display:      block;
          float:        left;
      }
      /* BLOCK PREVIEW END */
    </style>
  </head>
  <body>
    <div class="blocks ui-corner-all right" id="block_preview">
      <ul id="preview">
        <li class="preview_text">
          <span class="preview_logo">&nbsp;</span>
          Tapez votre texte ici avec éventuellement encore du texte et encore du texte.
        </li>
      </ul>
    </div>
  </body>
</html>

Tu noteras les modifications (structure et éléments du code HTML + style) et les suppressions (dans le style)

problème avec float:left et overflow:auto

Qui est en ligne