Toon posts:

[CSS] tekst met links en rechts floats

Pagina: 1
Acties:

Verwijderd

Topicstarter
Om mijn tekst om een object aan de linkerkant van mijn site te 'wrappen' maak ik gebruik van links floatende divs met een bepaalde breedte. Hier valt vervolgens de tekst mooi omheen, precies zoals ik wil. Echter, nu wil ik aan de rechterkant van mijn scherm bij de tekst ook nog een plaatje laten floaten, een beetje zoals bijvoorbeeld Geenstijl bij zijn artikelen heeft.
Dit levert echter in Opera problemen op, Opera vindt dat een plaatje niet rechts van een links gefloate div geplaatst kan worden, maar knalt hem er helemaal onder.
Hieronder een gedistileerde situatie schets:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
        div.spacer {
            float : left;
            clear : left;
            height : 10px;
        }
        
        img {
            float : right;
        }
        
        p {
            margin : 0 10px;
        }

en de html:
HTML:
1
2
3
4
5
6
        <div class="spacer" style="width : 10px"></div>
        <div class="spacer" style="width : 20px"></div>
        <!-- hier een hoop divs -->
        <div class="spacer" style="width : 10px"></div>
        [img]"blabla">
        <p>de[/img]

En hier een voorbeeld: klik

Nu denk ik dat de css standaard het gedrag van opera voorschrijft en IE het gewoon fout doet, maar in mijn geval is het gedrag van IE wél het gewenste. Hoe bereik ik hetzelfde in Opera? (Ik weet niet precies hoe FireFox het rendert, maar ik denk hetzelfde als Opera)

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 14:10

RM-rf

1 2 3 4 5 7 6 8 9

firefox doet het idd precies zoals Opera..
het plaatje verschijnt op precies de hoogte van de laatste linker float... oftewel op het moment dat het plaatje verschijnt is de 'pointer, op de regel van de laatste float en daar plaatst hij dan het rechts floatende plaatje....

mogelijk dat het kan helpen als je de IMG vóór de divs kunt plaatsen, dat deze als eerste geplaatst wordt, of eventueel zou het misschien ook kunnen helpen om de IMG binnen de P te plaatsen.

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


Verwijderd

Topicstarter
Ah dat eerste helpt ja, dat ik daar niet aan gedacht heb :).. Maar het is helaas wel wat moeilijk te onderhouden als ik er later een CMS achter wil hangen..
Vervelend dat CSS niet standaard een 'word-wrap' functie heeft, hoef je ook niet met dit soort lelijke oplossingen aan te komen.