Text wrapping

Thu, 24 May 2012 11:02:58 GMT

Hejsa

Jeg har en lille udfordring jeg ikke helt kan f� l�st, som en af jer sikkert kan hj�lpe mig med.
Der er en overskrift, et billede og en beskrivelse ved siden af.
Lidt ligesom i en shop er der en overskrift p� varen, et billede og m�ske en pris under billedet og s� en tekst til h�jre for.

Mit problem er at jeg gerne vil lave text-wrapping s�ledes at n�r brugeren g�r vinduet mindre s� tilpasser teksten sig selv i l�ngden og wrapper og bare udvider sig vertikalt n�r vinduet bliver mindre og horisontalt n�r det bliver st�rre.

Hvis jeg s�tter min- og max-width p� i % s� fungerer det stadig ikke medmindre jeg selv s�tter <br /> ind i teksten.
Ville gerne have den selv bare flytter dem til n�ste linie.

Min kode er som f�lger:

HTML kode

 <div class="type-line">
             <div class="section-titel">
                 <a name="Anchor1">
                     <h4 class="header">TITEL GOES HERE</h4>
                 </a>
             </div>
             <div>
                 <div class="image-section">
                     <img class="line-image" src="thumb.jpg" />
                     <div>Varen er udsolgt</div>
                     <div>Prisen er meget høj</div>
                 </div>
                 <div class="text-section">
                     <p class="description-text">Her skal der blive ved med at komme en ufattelig lang, dum og irriterende beskrivende tekst som ingen alligevel gider at læse overhovedet vel?                   </p>
                 </div>
             </div>
         </div>

CSS kode

 .type-line {
     min-height: 200px;
     background-color: #0ff;
     border: 2px solid red;
 }
 
 .section-titel {
      width: 100%;
 }
 
 .image-section {
     display: inline-block;
     max-width: 200px;
 }
 
 img.line-image {
     border: 1px solid #b8d30b;
     padding: 2px;
     min-width: 100px;
     max-width: 175px;
     display: inline-block;
 }
 
 .text-section {
     display: inline-block;
     vertical-align: top;
     max-width: 80%;
     max-width: 800px;
     min-width: 30%;
 }
 
 p.description-text {
     background-color: #ff6a00;
     display: inline-block;
     vertical-align: top;
     padding: 0px;
     margin: 0px;
     text-wrap: normal;
   }

Udvikleren.dk - Seneste [paragraph] forum tr�de

Text wrapping