Plaatje valt gedeeltelijk buiten div

[Booster]

Ik wilde het volgende bereiken

met het volgende stukje code:
_{(in eerste instantie een <p> gebruikt maar dat werkte niet, dus toen naar <div>)}

HTML:

<div class="fillup">
  [img]"icon1.jpg"[/img]
  <br>
  Test<br>
  Test
</div>

_{slordig geschreven, maar het was slechts een testje.}

Alleen het volgende wordt weergegeven:


Ik dacht dit op te lossen met

Cascading Stylesheet:

.fillup {display: block;
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: black;

    padding: 4px 4px 4px 4px;
}

maar dit was een denkfout, een div is immers standaard al een block

Cascading Stylesheet:

.fillup {display: table;}

Werkt eveneens niet, maar mogelijk dat ik nu gewoon in de verkeerde hoek aan het zoeken ben.

Hoe kan ik ervoor zorgen dat de div oprekt tot de grootte van het plaatje
Het kan natuurlijk met een table, maar ik heb daar een beetje een hekel aan.

[ Voor 13% gewijzigd door Booster op 11-05-2003 00:31 ]

[crisp]

hoe ziet je class="blackborder" eruit? (en eventueel overige CSS die hier nog mee te maken heeft)

[ Voor 51% gewijzigd door crisp op 11-05-2003 00:28 ]

[Booster]

Oww, vergeten:

Cascading Stylesheet:

.blackborder    {
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

en body:

Cascading Stylesheet:

body    {
    color: black;
    background-color: #E6E6E6;

    margin: 20px 20px 20px 20px;
    padding: 0px 0px 0px 0px;
}

[edit]
en even de volledige .fillup class toegevoegd in de startpost

[ Voor 58% gewijzigd door Booster op 11-05-2003 00:32 ]

[RM-rf]

ik neem aan dat je image een floatend element (float:left;) is, mogelijk helpt het door een extra element hierachter te zetten met een clear: all en width: 100%;height: 1px; dat dwingt dat element om onder de img uitgelijnd te worden over de hele breedte en zo de hoogte van de omvattende div te laten uitgroeien tot onder de hoogte van de floatende afbeelding.

de float zorgt er volgens mij voor dat de hoogte van het element niet meer meegerekend wordt; feitelijk is float een soort van positionering tussen relative en absolute in, eigenlijk zou dat ook beter een extra position: value kunnen zijn: position: float-left; en position: float-right; hadden me ook logisch geleken, maar ik weet niet van de reden was om dit binnen de specs zo te kiezen.

[Booster]

Die image is inderdaad float: left.

Je doelt dus op een paragraph na (naast) de floating image met als properties het volgende?

Cascading Stylesheet:

.smeeruit {
  clear: all;
  width: 100%;
  height: 1px;
}

Even uitproberen.

[ Voor 22% gewijzigd door Booster op 11-05-2003 00:53 ]

[crisp]

align="left" is idd equivalent aan float: left;
in IE is het eenvoudig op te lossen door de div gewoon een "height: 80px" te geven, als je meer text erin zet rekt de div dan toch uit. In Mozilla echter weer niet, daar kan je beter min-height gebruiken, maar dat ondersteund IE weer niet...
Zo geraak je dus een beetje in een pat-stelling

[Booster]

He bah, dat haat ik nou altijd.

Maar ok, in principe zou die height: 80px; een oplossing kunnen zijn, zolang er dus maar niet meer text in komt. (wat in deze situatie toevallig ook niet (vaak) het geval zal zijn, maar ik vind het weer zo'n vervelende oplossing)

Het gebruik van die .smeeruit class lijkt geen vruchten af te werpen, het ziet er dan hetzelfde uit als eerst. (image valt buiten div)

Misschien is het gewoon eerst even tijd om te gaan slapen

[edit]
Ik kan het misschien oplossen door de image in een aparte div te zetten, en de hele div float: left te maken

Of zou dat later nog vervelende complicaties opleveren

[ Voor 22% gewijzigd door Booster op 11-05-2003 01:11 ]

[crisp]

Booster schreef op 11 May 2003 @ 01:04:
He bah, dat haat ik nou altijd.

Maar ok, in principe zou die height: 80px; een oplossing kunnen zijn, zolang er dus maar niet meer text in komt. (wat in deze situatie toevallig ook niet (vaak) het geval zal zijn, maar ik vind het weer zo'n vervelende oplossing)

Het gebruik van die .smeeruit class lijkt geen vruchten af te werpen, het ziet er dan hetzelfde uit als eerst. (image valt buiten div)

Misschien is het gewoon eerst even tijd om te gaan slapen

[edit]
Ik kan het misschien oplossen door de image in een aparte div te zetten, en de hele div float: left te maken

Of zou dat later nog vervelende complicaties opleveren

Heb ik ook al geprobeerd (beide mogelijkheden), maar dat lost ook niets op.
Als IE nou eens gewoon volledig CSS2 compliant zou worden...

[Booster]

crisp schreef op 11 mei 2003 @ 01:29:
Heb ik ook al geprobeerd (beide mogelijkheden), maar dat lost ook niets op.
Als IE nou eens gewoon volledig CSS2 compliant zou worden...

Ik heb het hier even geprobeerd met de image in een aparte div, en dit werkt, zolang je voor de eerste div maar een width=100% aanhoud

Ik zal nog even posten wat ik gebruikt heb daarvoor:

Cascading Stylesheet:

.fillup {
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    padding: 4px 4px 4px 4px;
    width: 100%;
}

img.blackborder {
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

div {
    float: left;
}

HTML:

<p>head</p>

<div class="fillup">
  <div>
    [img]"icon1.jpg"[/img]
  </div>

  <p style="display: inline;">Test<br>
  Test</p>
</div>

<p>foot</p>

Indien je de eerste div niet op width=100% houd, dan zal 'foot' bovenaan, naast de div komen te staan.
_{niet zo blaten boost, je maakte gewoon een foutje in je code}

Komt dit overeen met wat jij getest had verder

[ Voor 25% gewijzigd door Booster op 11-05-2003 14:10 ]

[Grijze Vos]

code-snippet
width="80" height="80"

Komt et niet daardoor? Dat is naar mijn weten geen HTML4/CSS2 compliant tag.

[crisp]

Grijze Vos schreef op 12 mei 2003 @ 00:59:
[...]
Komt et niet daardoor? Dat is naar mijn weten geen HTML4/CSS2 compliant tag.

toch wel hoor; het is niet eens deprecated in HTML4.
Een 'min-height' lost hier het hele probleem op; er bestaan trouwens javascripts waardoor min-height in IE ook nagebootst wordt.
Een placeholder-div met clear: left; aan het eind van je content lost het probleem dus op, zie ook: [rml][ css] div height in mozilla[/rml]

[ Voor 44% gewijzigd door crisp op 12-05-2003 10:37 ]

[Verwijderd]

Oh dit probleem is bekend Had er zelf ook al last van, heb het maar op de wel werkende oude methode opgelost...... een table

[Booster]

De image in een aparte div vind ik ook een prima oplossing eigenlijk.

Het is opgelost in ieder geval, bedankt

[ Voor 25% gewijzigd door Booster op 12-05-2003 19:08 ]