Foto naast korte paragraaf

Ik moet een foto naast een vrij korte paragraaf zetten, dit gaat prima door de foto naar links of rechts te floaten, bijvoorbeeld:

.foto_links
{
float: left;
width: auto;
}

<div class=“foto_links”>
<\img alt="…" />
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>

Wanneer de tekst in de paragraaf vrij kort is, zoals hierboven, dan is de foto langer dan de tekst, en de volgende paragraaf zal ook de ruimte naast de foto opvullen tot de onderkant van de foto is bereikt.

Hoe zorg ik dat de volgende paragraaf pas begint na de onderkant van de foto?

Edit: Grrrrr… code tag werkt nog steeds niet :x :x :x (n) (n)

Door de tekst en foto binnen één div te plaatsen misschien? Je kan daarna nog kijken naar een manier om de tekst padding te geven om afstand tot de foto te behouden maar je kan natuurlijk de foto ook wat extra wit geven aan de kant waar de tekst aansluit.

<br clear=“all” /> na de tekst is een mogelijkheid.

Mooie tip iJos. Kende ik nog niet…

Hmm, dat werkt hier nog niet, waarschijnlijk wat conflicten met mijn css voor de p en/of img tag.

@iJos: zet je dat vóór of na de afsluitende p tag?

Na de afsluitende tag.

Je kan ook een “break” toevoegen. Minder fraai maar super simpel en effectief.

Gewoon een DIV met inline styling op 100% wijd eronder plaatsen:

Méést in stijl is natuurlijk tekst en beeld in een div zetten.

Het is uiteindelijk dit geworden, na de paragraaf.

<div style=“clear:both;”><br /></div>

Bedankt allen (y)

Jongens jongens, kom op zeg ik waardeer het dat jullie iemand willen helpen maar met dit soort handstand goochel werkzaamheden help je natuurlijk niemand anno 2013.

We kunnen hem ook nog een blanco afbeelding ergens binnen de content div laten plaatsen die zorgt voor extra ruimte dat lost het ook heel eenvoudig op maar dat is natuurlijk niet de manier om iemand te helpen.

Ontopic:

Het probleem zit hem in twee dingen ten eerste sluit je de afb. niet goed op binnen de p of de div want nu sluit je de div alweer af direct na de img terwijl je nog de tekst ernaast wilt hebben. …en ten tweede die div width auto. ??? dat bestaat niet omdat je kunt alleen iets een width auto geven als je ook een fysieke breedte hebt. Wat je nu eigenlijk zegt tegen die div is wordt maar zo breed als niets - kortom de width auto weglaten en alleen de float left laten staan heeft precies hetzelfde effect, namelijk dat de div zo breed wordt als de content erin.

Op een afb. zou dat in dit geval wel kunnen omdat deze een fysieke breedte + hoogte heeft van bijv. 235px bij 185px. Dat is een vaste breedte waar je een auto op kunt zetten zoals je dat vaak ziet gebeuren om ‘responsive images’ te creëren.

Wat je moet doen is één div als content wrapper nemen, daar zijn divs namelijk voor om content te bundelen en dan met paragrafen werken en je afbeelding gewoon in die paragraaf stoppen waar ook de tekst in zit want die tekst moet toch naast de afbeeldingen komen? De volgende tekst die er dan onder moet komen die zet je in een aparte P tag.

Voorbeeld:

<div id="content">
    <p>Tekst naast de afbeelding.. <\img alt="…" /></p>
    <p>nog meer tekst onder de afbeelding….</p>
</div>

CSS
#content { float: left; }

img { max-width: 100%; height: auto; } /* responsive images */

.align-left { float: left; }
.align-right { float: right; }
.align-center { float none; margin: 0 auto; }

p { margin-bottom: 1.250em; }

Natuurlijk kun je binnen de bovenstaande content ID div nog eens twee columns (left-/right) maken mocht je dat willen.

<div id="content">
    <div class="col-left">
        <p>Tekst naast de afbeelding.. <\img alt="…" /></p>
        <p>Nog meer tekst onder de afbeelding….</p>
    </div>
    <div class="col-right">
        <p><\img alt="…" /> Tekst naast de afbeelding...</p>
        <p>Nog meer tekst onder de afbeelding.….</p>
     </div>
</div>

Extra CSS

.col-left { width: 50%; float: left; }
.col-right { width: 50%; float: right; }

iJos z’n tip werkt wel maar dat is echt niet de manier om mee aan de slag te gaan, sorry dat is allen een clear op (alles) gebruiken om uit wanhoop een nieuwe regel te maken. Terwijl je dit simpel kunt doen met een float left.

Wat je hierdoor gaat krijgen is dat je dit soort taferelen gaat zien ontstaan omdat mensen denken dat de BR tag ruimte maakt.

<p>Wall of text…. <br><br><br><br><br></p>

En dat alleen maar om bijv. 65px wit-ruimte te krijgen onder de laatste regel tekst.

Ik heb onderlaatst een voorbeeld gemaakt over hoe je afbeeldingen kunt uitlijnen, kijk in de broncode en doe er je voordeel mee.
https://dl.dropboxusercontent.com/u/75896077/online/ipad.html

Bedankt voor de uitleg Shmoo.

Is het trouwens eenvoudiger met de html5 <figure> tag? Of moet ik dan nog steeds een <div> rond de tekst + figuur zetten?

De figure tag is om afbeeldingen en grafieken in te verzamelen die relevant zijn aan bepaalde stukken-/lappen tekst maar die niet in de buurt staan van die van die tekst, of tenminste niet daar waar er over gesproken wordt.

Bijv. met dit soort afbeeldingen-/grafieken zie je dat vaak gebeuren, dan zie je tussen de tekst ( zie fig. 2 ) staan maar de afbeelding fig. 2 staat helemaal onderaan de pagina samen met andere afbeeldingen.

Op die manier werkt de figure tag in HTML 5.

De figure tag op zich zelf werkt hetzelfde als een div tag en heeft zonder CSS geen enkele meerwaarde op de website. Mocht je de figure tag ooit nodig hebben dan hoef je die niet nog eens in een div te wrappen.

Hoe fruts ik daar nog een ondertitel voor het plaatje in? Ik heb al wat met de <span> tag geprobeerd, maar dan staat de tekst bij de paragraaf, niet onder het plaatje. Misschien nog een extra div rondom de img en ondertitel ?

Klopt dan wrap je die stuff ( image + tekst ) nog eens in een div om het geheel op te sluiten zodat je die gehele div met alles erin makkelijker kunt floaten in de richting die je graag wilt , alleen ipv een span tag gebruik je dan een figcaption tag voor de tekst onder de plaatje.

http://jsfiddle.net/HPCYm/542/

Mocht het van toepassing zijn dan zou je in bovenstaand voorbeeld ook de figure tag kunnen gebruiken ipv de div tag om alles in op te sluiten.

Zie je ook dat ik nu de alignement ‘class’ van de img tag hebt gehaald en nu de div float ipv de img tag?
Ik heb de .thumb class standaard een float left gegeven en door er alleen een extra class met de naam right aan toe te voegen switch je heel eenvoudig naar rechts.
Verwijder maar eens het woordje right achter thumb (HTML) en druk daarna op UPDATE in de blauwe balk, dan floept de gehele handel zo naar links.

Geweldig, dat is wat ik zoek, reuze bedankt!

En het werkt ook goed met een korte paragraaf, ik heb dat getest in die link, kun jij dat ook zien?

EDIT: O nee, het werkt nu weer niet met een korte paragraaf, zie de geüpdate code in de jsfiddle link.

Dan moet je nog een extra wrap maken die je intro of excerpt noemt zodat de eerste paragraaf + de thumb gebundeld worden.

http://jsfiddle.net/JXHT3/1/

Het werkt! (y)

Nog een vraagje dan :slight_smile:

Hoe krijg ik twee foto’s naast elkaar gecentered in het midden, dus niet dat de één float left en de ander float right heeft? Ik heb de code aangepast, maar ze staan onder elkaar, niet naast elkaar.

Door bijv. twee columns naast elkaar te maken waar je dan de tumbs in plaatst en die wrap je dan waar in een extra wrapper met een float none en margin: 0 auto; om hem in het midden te positioneren.

zoiets bijv.
http://jsfiddle.net/t8JL5/

Hoera, het werkt!

Opnieuw, heel erg bedankt! :slight_smile: