Il div flottante con larghezza in percentuale non si adatta al contenuto

[Reiuky]

Ho questa esigenza: un div con caratteristiche
float:left; width:33%;

contiene una immagine di larghezza a piacere (ad esempio 400px)

Finché la larghezza dell'immagine mi sta in quel 33% della pagina va tutto bene, il problema viene quando quel 33% non è più sufficiente per contenere l'immagine.

Il div continua ad essere largo il 33% della pagina, e l'immagine continua ad essere 400px , uscendo dal div e andando a sovrapporsi con qualsiasi cosa si trovi alla sua destra.

è possibile fare in modo che il div non diventi mai più piccolo del suo contenuto o risolvere in qualche modo questa fastidiosa sovrapposizione? (no, la proprietà overflow:hidden non è una possibilità. Non posso nascondere i contenuti)

Grazie in anticipo.

[Mich_]

Credo che devi dare:

  float: left;
  min-width: 33%;
  width: auto;   /* questo dovrebbe essere default */

[Reiuky]

Credo che devi dare:

  float: left;
  min-width: 33%;
  width: auto;   /* questo dovrebbe essere default */

(mamma mia che giro assurdo per provare quella modifica )

Uhm... risolve il problema quando c'è l'immagine, ma se c'è un testo, si allarga fino al 100%

Esempio:

<div>
<div style="min-width:32%;" class="FloatLeft">
	<img width="622" src="http://localhost/Alpha/Immagini/cipolla2.jpg">
</div>
</div>
<div style="min-width:32%;" class="FloatLeft">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et risus hendrerit nunc feugiat venenatis ut nec purus. Nunc porta nisi ut velit cursus, tincidunt elementum mi interdum. Mauris quam ligula, congue nec lectus sed, euismod aliquam erat. Etiam sit amet massa mauris. Suspendisse elementum euismod massa sit amet rutrum. Praesent condimentum mi quis lectus pulvinar, et molestie enim viverra. Vivamus viverra consequat velit, sed fermentum massa luctus vel. Fusce rhoncus ligula tincidunt, maximus felis a, auctor eros. Sed dui ligula, porttitor id dolor quis, egestas maximus diam. Nullam ullamcorper, felis ac mattis pretium, neque lorem aliquam enim, non varius ante nisl sed turpis. Sed dictum augue eros, id sodales dui mollis ut. Nunc turpis eros, mollis fermentum ligula a, mollis porta nunc. Proin eu felis ipsum. Pellentesque venenatis vitae mauris quis viverra. Duis nec lectus viverra mauris sollicitudin vulputate ut eu odio. Fusce vestibulum viverra risus, at lobortis lorem pellentesque sed.</p>
</div>
</div>

Purtroppo deve funzionare in più situazioni, con del testo dentro (al che lo deve confinare al 33%), con una immagine etc.

[Reiuky]

Aspetta... è pure peggio di quello che pensavo: se gli dico "min-width:33%;width:auto", cerca di allargarsi al 100% (e ci riesce)

[Prill]

Aspetta... è pure peggio di quello che pensavo: se gli dico "min-width:33%;width:auto", cerca di allargarsi al 100% (e ci riesce)

La larghezza sarà del 33% e la larghezza minima 400px (ma larghezze minime andranno probabilmente impostate anche sui contenitori)

[Reiuky]

La larghezza sarà del 33% e la larghezza minima 400px (ma larghezze minime andranno probabilmente impostate anche sui contenitori)

Dovrei conoscere il contenuto del contenitore per fare queste impostazioni... era quello che volevo evitare. Speravo si potesse fare con il css (come potete immaginare è un programma che impagina)

[Mich_]

Capisco il problema, e non e` di facile soluzione.

In pratica tu vorresti che se il tuo <div> contiene un <img> fosse formattato : min-width:33%;
se invece il <div> non contiene <img> fosse formattato : width:33%;
Non so se e` possibile. Forse qualche browser ha una formattazione proprietaria per questo.

Pero` mi vien da pensare ...
quando tu monti la pagina (da parte del programma lato server - PHP, ASP, ...) tu sai cosa contiene il tuo <div>.
E potresti aggiungere una classe al <div> in modo che la formattazione cambi a seconda del contenuto.

[Reiuky]

Capisco il problema, e non e` di facile soluzione.

In pratica tu vorresti che se il tuo <div> contiene un <img> fosse formattato : min-width:33%;
se invece il <div> non contiene <img> fosse formattato : width:33%;
Non so se e` possibile. Forse qualche browser ha una formattazione proprietaria per questo.

Pero` mi vien da pensare ...
quando tu monti la pagina (da parte del programma lato server - PHP, ASP, ...) tu sai cosa contiene il tuo <div>.
E potresti aggiungere una classe al <div> in modo che la formattazione cambi a seconda del contenuto.

Il problema è che non lo so a prescindere.

Cioè, se non c'è altro modo metto le mani sul codice, ma speravo di poterlo fare solo con css...

[KillerWorm]

Ho provato diverse strade con css. In effetti non è stato semplice trovare una soluzione per ciò che hai chiesto, ma quando l'ho trovata mi son detto «Uhm! era così semplice».
La parola chiave è display:table.

Un esempio dimostrativo:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      
      .tuodiv{
        width:33%;
        display:table; /* ← il bandolo della matassa */
        
        box-sizing: border-box;
        border: 2px solid Blue;
        background: grey;
      }
      
      .tuodiv>p{
        background: orange;
      }

      .FloatLeft{
        float:left;
      }
      .Break{
        clear:both;
      }
      
    </style>
  </head>
  <body>
      <div class="tuodiv FloatLeft">
        <img width="400" src="image.jpg">
      </div>
      <div>Altra roba di fianco al div</div>
      <div class="Break"></div>
      <div class="tuodiv FloatLeft">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et risus hendrerit nunc feugiat venenatis ut nec purus. Nunc porta nisi ut velit cursus, tincidunt elementum mi interdum. Mauris quam ligula, congue nec lectus sed, euismod aliquam erat. Etiam sit amet massa mauris. Suspendisse elementum euismod massa sit amet rutrum. Praesent condimentum mi quis lectus pulvinar, et molestie enim viverra. Vivamus viverra consequat velit, sed fermentum massa luctus vel. Fusce rhoncus ligula tincidunt, maximus felis a, auctor eros. Sed dui ligula, porttitor id dolor quis, egestas maximus diam. Nullam ullamcorper, felis ac mattis pretium, neque lorem aliquam enim, non varius ante nisl sed turpis. Sed dictum augue eros, id sodales dui mollis ut. Nunc turpis eros, mollis fermentum ligula a, mollis porta nunc. Proin eu felis ipsum. Pellentesque venenatis vitae mauris quis viverra. Duis nec lectus viverra mauris sollicitudin vulputate ut eu odio. Fusce vestibulum viverra risus, at lobortis lorem pellentesque sed.
        </p>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et risus hendrerit nunc feugiat venenatis ut nec purus. Nunc porta nisi ut velit cursus, tincidunt elementum mi interdum. Mauris quam ligula, congue nec lectus sed, euismod aliquam erat. Etiam sit amet massa mauris. Suspendisse elementum euismod massa sit amet rutrum. Praesent condimentum mi quis lectus pulvinar, et molestie enim viverra. Vivamus viverra consequat velit, sed fermentum massa luctus vel. Fusce rhoncus ligula tincidunt, maximus felis a, auctor eros. Sed dui ligula, porttitor id dolor quis, egestas maximus diam. Nullam ullamcorper, felis ac mattis pretium, neque lorem aliquam enim, non varius ante nisl sed turpis. Sed dictum augue eros, id sodales dui mollis ut. Nunc turpis eros, mollis fermentum ligula a, mollis porta nunc. Proin eu felis ipsum. Pellentesque venenatis vitae mauris quis viverra. Duis nec lectus viverra mauris sollicitudin vulputate ut eu odio. Fusce vestibulum viverra risus, at lobortis lorem pellentesque sed.
      </p>
  </body>
</html>