28173 sujets

CSS et mise en forme, CSS3

[Résolu] Overflow et div avec float

Bonjour,

J'essais de placer cote a cote plusieurs div dans un div en overflow mais je n'y arrive pas.
Le résultat est que les div se placent l'un au dessous de l'autre.
Ci-dessous le code html et le css.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Déplacements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

  <div id="page">

    <div id="dep_bloc">

      <div class="dep_lib">LIBELLE 01</div>
      <div class="dep_lib">LIBELLE 02</div>
      <div class="dep_lib">LIBELLE 03</div>
      <div class="dep_lib">LIBELLE 04</div>
      <div class="dep_lib">LIBELLE 05</div>
      <div class="dep_lib">LIBELLE 06</div>
      <div class="dep_lib">LIBELLE 07</div>

    </div>

  </div>

</body>

</html>




* {
margin: 0;
padding: 0;
}

html {
font-size: 100%;
}

body {
font: 0.8em Arial, Verdana, helvetica, Times New Roman, sans-serif;
color: #000;
background-color: #fff;
}

#page {
text-align: left ;
margin: 20px;
}

div#dep_bloc {
margin-top: 1em;
margin-bottom: 1em;
height: 8em;
width: 25em;
overflow: auto;
}

div.dep_lib {
float: left;
text-align: center;
font-weight: bold;
color: white;
background: #000080;
margin-bottom: 0.1em;
width: 30em;
}



Merci pour vos avis.

Eric
Modifié par eric24 (22 Aug 2007 - 10:43)
Salut,

Si tu essaies de mettre côte à côte des éléments qui font 30em de largeur, à l'intérieur d'un conteneur qui n'en fait que 25, il va évidemment y avoir un problème ...

Tu essaies de forcer le défilement horizontal ?
Ok. Dans ce cas, il faut se pencher sur la propriété CSS whitespace, mais je n'ai aucune idée du comportement que tu vas obtenir en combinaison avec les flottants ...
Ces div contiennent différents libellés. Effectivement avec un tableau je n'ai pas le pb mais je voulais éviter cette structure entre autre pour gérer une séquence de remplissage particulière.
Bonjour,

J'ai un peu le même soucis.

J'ai mis une taille beaucoup plus grande pour le contenu, et overflow:scroll.

le problème c'est que la taille étant défini, que le bloc contenu prenne toute la place ou pas, le scroll existe et fonctionne sur toute la longueur (donc on peut aller loin à droite sur du vide, c'est moche Smiley langue )

Je cherche tjs une solution pour que le scroll s'adapte à la taille de mon contenu.

Merci d'avance. Smiley biggrin
Ci-dessous une solution :

Il faut doubler le conteneur <div id="dep_bloc">

donc :


<div id="dep_bloc">
    <div id="sub_dep_bloc">
    
      <div class="dep_lib">LIBELLE 01</div>
      <div class="dep_lib">LIBELLE 02</div>
      <div class="dep_lib">LIBELLE 03</div>
      <div class="dep_lib">LIBELLE 04</div>
      <div class="dep_lib">LIBELLE 05</div>
      <div class="dep_lib">LIBELLE 06</div>
      <div class="dep_lib">LIBELLE 07</div>
 
    </div>
</div>


et pour le style :


#sub_dep_bloc {
width:210em; /* soit 7 fois 30em */
}
Sujet clos
Aller à