Image flowt uit div

[Neobender]

Ik kom niet helemaal uit een probleempje dat (naar mijn weten) heel simpel op te lossen moet zijn.
Ik heb een div (breedte van 500px) met daarin een plaatje die rechts staat uitgelijnd tov de tekst. Als dat plaatje groter is dan de tekst, dan steekt hij uit de div in plaats van dat de div mee oprekt.
Ik zal waarschijnlijk iets over het hoofd zien, maar ik snap niet echt wat (gevalletje fauxcolumns? overflow vergeten?)

De code:

HTML:

<div id="hokje">
    <h1>Welkom</h1>
        <p>
            <img src="plaatje.jpg" alt="Zelfportret" align="right"/>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>

& de css:

Cascading Stylesheet:

#hokje {
    width: 500px;
    background-color: #EEE;
}

Voorbeeld De plaatjes van de 1e 2 posts moeten dus boven de balk met de postinformatie komen.

[kalechinees]

volgens mij kun je aan de css gewoon height: auto toevoegen....

[BasieP]

heeft niks met faux columns te maken, ik denk dat height: auto ook niet gaat helpen, omdat het plaatje in de breedte uitsteekt.

wordt je plaatje wel als in-line element gerenderd? en is ie niet absoluut gepositioneerd? (allebij settings die default goed zouden moeten staan)

ik denk dat een ander stuk css zorgt dat deze code inet goed gaat, want default zou het gewoon goed moeten gaan..

testcase zou leuk zijn eventueel

[ Voor 21% gewijzigd door BasieP op 20-09-2006 21:49 ]

[Rowanov]

Ik heb het vermoeden dat het gaat om het clearen van je berichten div; je zou een overflow: hidden of auto kunnen proberen op #berichten.

[Neobender]

auto werkt niet (al werkte het wel met het een testje voor een schoolopdracht) en ik denk idd dat het ook niks met height te maken heeft.
Ik zal morgen eens proberen om de #berichten op clear te zetten ofzo.

[kalechinees]

ik blijf voor de height: auto gaan.
Probeer anders je plaatje niet in de html maar in de css te alignen.
dus position: relative; right:0 in #plaatje en dan height:auto toevoegen aan hokje...

[user109731]

@kalechinees: leg dan eens uit wat dat height:auto; toevoegt volgens jou?

Volgens mij is height standaard al ingesteld op auto...

[TafkaT]

HTML:

<div style="clear:both;"></div>

na de text+plaatje, maar in de div zal het wel oplossen.

edit:

align wordt trouwens niet meer gebruikt voor images, vervanger is de css variant float, welke hetzelfde effect heeft

[ Voor 38% gewijzigd door TafkaT op 21-09-2006 10:35 ]

[Neobender]

dus

HTML:

<div id="post">blalalalaa<div style="clear: both;"></div></div>

?

[mithras]

Een style element clear:both kan je beter (en netter) oplossen door in je parent een style overflow:auto aan te geven. Dan heb je ook geen extra element nodig om de float af te breken. Zie ook http://www.positioniseverything.net/easyclearing.html

[killercow]

yup,

Met align=right geef je aan dat het plaatje moet gaan floaten,

Met een * element na het plaatje die door middel van clear:both onder elke andere voorkomende content moet komen schuif je de div naar de juiste grote.

HTML:

<div>
<img src="" style="float:right" />
<br style="clear:both" />
</div>

Kan ook.

[Neobender]

Neobender schreef op donderdag 21 september 2006 @ 20:41:
dus

HTML:

<div id="post">blalalalaa<div style="clear: both;"></div></div>

?

Heb het hier inmiddels mee gefixt, zal van de week even de css onderhanden nemen en opschonen.
Bedankt anyway

[mithras]

killercow schreef op donderdag 21 september 2006 @ 20:52:
yup,

Met align=right geef je aan dat het plaatje moet gaan floaten,

Dat heeft weinig met floaten te maken

Met een * element na het plaatje die door middel van clear:both onder elke andere voorkomende content moet komen schuif je de div naar de juiste grote.

HTML:

<div>
<img src="" style="float:right" />
<br style="clear:both" />
</div>

Kan ook.

Allereerst is het volgens mij geen * element (als in: alles kan het zijn?), maar alleen bloklevel elementen.

killercow schreef op donderdag 21 september 2006 @ 20:52:
yup,

Met align=right geef je aan dat het plaatje moet gaan floaten,

Met een * element na het plaatje die door middel van clear:both onder elke andere voorkomende content moet komen schuif je de div naar de juiste grote.

HTML:

<div>
<img src="" style="float:right" />
<br style="clear:both" />
</div>

Kan ook.

Wat ik hier vertelde: Mithras86 in "Image flowt uit div" is een oplossing van deze uit de tijd. Dat <div style="clear:both"> </div> is erg achterhaald en verder zorgt het voor een extra witregel, die je mogelijk niet wil.

Neobender schreef op zondag 24 september 2006 @ 19:05:
[...]


Heb het hier inmiddels mee gefixt, zal van de week even de css onderhanden nemen en opschonen.
Bedankt anyway

Kijk daarom naar mijn oplossing, omdat die netter is en geen extra html nodig heeft. Je moet alleen overflow:auto; aan je parent element toevoegen