[CSS] Div hoogte wordt bepaald door tekst, niet door image

[Duncank]

Ik heb een div met daarin een afbeelding met "align=left" Mijn tekst staat daar rechts naast.
Deze div houdt echter op daar waar de tekst stopt, en die stopt hoger dan het onderste van de afbeelding.

Wat moet ik in mijn css toevoegen om de div te laten kijken naar de hoogte van de afbeelding?

[HaTe]

Hier kunnen we niet zo heel veel mee.

Maar ik denk dat je in je CSS de div een hoogte en breedte mee hebt gegeven. Als je die weg haalt moet het goed gaan.

Heb je wel de afbeelding IN de div en niet als achtergrond?

[Duncank]

De div heeft geen hoogte en breedte en de afbeelding is met <img src.... aangeroepen IN de div.

Zie hier wat ik bedoel:

http://projectfive.nl/test.php

[HaTe]

Ah I see
Probeer dit eens:
display: inline;

[Duncank]

helaas, display: inline, block en inline-block mogen allemaal niet helpen

[tonyisgaaf]

Je float de image ook, dus dan kun je deze "clearen" d.m.v. een dummy element met als style property "clear: both;" of op (alle) container div's (startend bij de "diepste") een style property "overflow: hidden;".
En wanneer je CSS gebruikt, haal dan niet inline styles en externe stylesheets door elkaar, want dan raak je snel het overzicht kwijt. Dump sowieso die "align" propertie van de img, heeft nul toegevoegde waarde wanneer je d.m.v. CSS style-t.

Edit:
Idd, een "overflow: hidden;" op de 'div.gradblack' is voldoende. Als vuistregel kun je aanhouden dat hoogte laten bepalen door "gefloate" elementen alleen werkt als het element/ de container erboven een "overflow: hidden;" meekrijgt. Dit werkt uiteraard alleen als je geen "height" property gebruikt. Dan is nl., je raad het al, de "overflow" behoorlijk "hidden".

[ Voor 29% gewijzigd door tonyisgaaf op 12-10-2008 22:37 ]

[Duncank]

Die had ik inderdaad toegepast. Maar nu valt me op dat het het probleem in Internet Explorer nog niet oplost. Weet je toevallig waar m dat in zit?

Zou ik daarvoor de divs een relative of absolute position mee moeten geven?

[ Voor 21% gewijzigd door Duncank op 12-10-2008 22:51 ]

[Pkunk]

Duncank schreef op zondag 12 oktober 2008 @ 22:49:
Die had ik inderdaad toegepast. Maar nu valt me op dat het het probleem in Internet Explorer nog niet oplost. Weet je toevallig waar m dat in zit?

Zou ik daarvoor de divs een relative of absolute position mee moeten geven?

haslayout. Gooi maar eens een zoom:1 of width:100% op je topdiv

[Duncank]

Weer 1 stap verder, met weer 1 nieuw probleem. De div heeft nu in IE inderdaad ook de grootte van de afbeelding, maar pakt hierbij de margin van 10px die rondom de afbeelding zit niet mee en grenst dus aan de onderkant rechtstreeks aan de afbeelding.

[Pkunk]

Duncank schreef op zondag 12 oktober 2008 @ 23:39:
Weer 1 stap verder, met weer 1 nieuw probleem. De div heeft nu in IE inderdaad ook de grootte van de afbeelding, maar pakt hierbij de margin van 10px die rondom de afbeelding zit niet mee en grenst dus aan de onderkant rechtstreeks aan de afbeelding.

Die kan je prima zelf oplossen door te spelen met paddings en margins. gl

[Duncank]

Dat wil anders niet lukken. De overflow:hidden zorgt ervoor dat in IE met de margin aan de onderkant geen rekening wordt gehouden.
Waarin zou ik dit moeten aanpassen dan?

[Clay]

padding op de image

Images kan je immers ook padding, margin, borders zelfs background images geven, net als andere elementen.

[Duncank]

Clay schreef op woensdag 15 oktober 2008 @ 09:33:
padding op de image

Images kan je immers ook padding, margin, borders zelfs background images geven, net als andere elementen.

Maar dat mag helaas niet baten. Ik heb op de afbeelding een padding-bottom van 10px gezet, en in firefox komen er dan inderdaad 10px bij onder de afbeelding, maar in Internet Explorer geen verschil...

[Raem]

Verander het volgende in je CSS:

code:

.gradblack {
    background-image : url('img/gradblack.png');
    overflow : hidden;
    width : 100%;
    padding-top: 10px;
    padding-bottom: 10px;

}

.slide {
    margin-right:10px;
    float : left; 
    margin-left : 35px;
    }

[Duncank]

And that does the trick! Dankjewel!