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
