the floating blues

[jeel2008]

ik heb weer eens een floatingprobleempje.

http://www.jeelsites.nl/jeff/

maar dat moet er zo uitkomen te zien: zie image

beide plaatjes moeten onder elkaar, links!
en de tekst rechts?

hoe float ik mezelf daar naartoe?

[Veldar]

Mss kan je dat doen via een tabel

[csshunter]

Nee-nee, tabellen voor de opmaak zijn drijfzand: daar wagen we ons niet op.

(wordt vervolgd)

[csshunter]

Potspieterpaaltjes, dat Joomla-template weet er ook wat van!
Zal ik even in Firebug de div'jes openklikken om bij de drijfkoeien-images te komen, krijg ik dit voor m'n kiezen:

Daar krijgt je helemaal de klikkeritis van!

(wordt vervolgd)

[csshunter]

Ah, de twee images zijn nu alle twee links-gefloat: dat doen ze ook, de tweede drijft aan de linkerkant tegen de eerste aan.
Wat er nodig is, is dat ze samen naar links worden gefloat, in een box die maar zo breed is als 1 image: dan moeten ze wel onder elkaar komen!

Overdaad schaadt, maar er zal dus toch nog één <div> bij moeten komen.

Wat dacht je van deze:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="art-article">
    <div style="padding: 130px 100px; background-image: url('/jeff/images/stories/achtergrond3png.png'); 
        background-repeat: no-repeat; height: 1180px;">
        <div style="float: left; width: 275px; margin-top: 10px">
            <img width="250" height="186" style="margin: 0px 25px 20px 0px; border: 3px solid #aecfe1;" alt="koe" src="/jeff/images/stories/foto1.jpg">
            <img width="250" height="186" style="margin: 0px 25px 20px 0px; border: 3px solid #aecfe1;" alt="koe" src="/jeff/images/stories/foto2.jpg">
        </div>
        <p style="font-style: italic;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

Kan dat de blues verdrijven?

Met vriendelijke groet,
CSShunter

PS:
Nu wordt het een verticale kolom tekst-blokken die bv. bij fontscaling niet meer precies naast een image hoeven te komen.
Als je een image en de tekst rechts ervan steeds horizontaal als een geheel wilt hebben, moet het anders.
Dan kan de extra div gemist worden en wordt het telkens:

1
2
3
4
<p style="clear: left; ...">
    <img style="float: left; ...">
    Naastkomende tekst ...
</p>

[jeel2008]

het ziet er zo simpel uit...

de blues is helemaal weggefloat, althans de floating blues dan toch

in ieder geval bedankt!