CSS > border om alles ... hoe?

Ik probeer al een tijdje een stukje tekst rechts van een foto te krijgen met om alles een border! Maar wat ik ook probeer ... het lukt niet! Let wel: hoe groot de foto of tekst ook wordt, de border moet er omheen blijven.

Het lijkt zo simpel … wie heeft de gouden tip?

[img:c03bda551d]http://home.planet.nl/~vos00622/test/border01!.jpg[/img:c03bda551d]

[url=http://www.momono.nl/downloads/border]Hier[/url] heb ik ff een werkend voorbeeld neergezet :wink:

En hier is dat voorbeeld in een ZIP te downloaden…

@syndic > Dank voor zoveel moeite ... nooit gezien of gelezen ... de truuc met een extra div.spacer .. en dan clear: both ... 't werkt, dat wel! Ben benieuwd of er nog meer oplossingen zijn!

edit: verkeerd gelezen, en verkeerd voorbeeld gegeven. geen tijd voor nieuw voorbeeld

Als je overflow:hidden aan de .item rule meegeeft heb je de spacer divs niet meer nodig...

[code:1:9f35c110ee]body {
margin: 20px;
font-family: "Lucida Grande", Verdana;
font-size: 11px;
line-height: 16px;
}

.item {
border: 1px solid #0099FF;
padding: 6px;
width: 500px;
margin-bottom: 20px;
overflow:hidden;
}

.item img {
float: left;
margin-right: 10px;
margin-bottom: 0px;
}

p {
margin: 0px;
}

h1 {
font-family: "Arial Narrow", Arial, Geneva;
font-size: 18px;
color: #999999;
text-transform: uppercase;
margin: 0 0 10px;
letter-spacing: 2px;
}[/code:1:9f35c110ee]

@kaydie > erg elegant ... ik probeer nog wel te begrijpen (mijn hersenen wel te verstaan) hoe het eea precies werkt ... {overflow:hidden} staat bekend als toepassing bij absoluut gepositioneerde elementen ... om te voorkomen dat bv tekst uit een box loopt! Maar hoe zit het hier ... pffff!

De overflow property kan gebruikt worden op blocklevel elementen en zal waar toegepast de content binnen het element dat buiten de in de css opgegeven width en height van dat element valt verbergen.

Omdat er wel width opgegeven is, maar geen height, schuift daardoor de content box vertikaal mee met de content binnen de content box…

[quote:e4aa4396ce="kaydie"]De overflow property kan gebruikt worden op blocklevel elementen en zal waar toegepast de content binnen het element dat buiten de in de css opgegeven width en height van dat element valt verbergen.

Omdat er wel width opgegeven is, maar geen height, schuift daardoor de content box vertikaal mee met de content binnen de content box…[/quote:e4aa4396ce]

Hmm, niet zozeer blocklevel elementen. zolang het maar een bounding box heeft. Een float is standaard een inline element en daar is ook prima de overflow te regelen :wink:

oftewel: elk [b:e4aa4396ce]box[/b:e4aa4396ce]-element heeft een overflow property.

<fieldset> als je wil kan je nog een <legend>titel in de lijn</legend toevoegen hier je tekst + img </fieldset>

overflow kan voor problemen zorgen: http://mezzoblue.com/archives/2005/03/03/clearance/index.php. De volgende methode is beter: http://www.positioniseverything.net/easyclearing.html

Ik gebruik easyclearing. Als je het netjes wilt doen zet je de IE-hack wel in een aparte stylsheet, zie http://www.noipo.org/index.php?id=252

[quote:9db958e80e="ReaLX"]Hmm, niet zozeer blocklevel elementen. zolang het maar een bounding box heeft. Een float is standaard een inline element en daar is ook prima de overflow te regelen ;)

oftewel: elk [b:9db958e80e]box[/b:9db958e80e]-element heeft een overflow property.[/quote:9db958e80e]
Ok… Lees citaat 11.1.1 Overflow: the ‘overflow’ property uit de CSS 2.1 Specification eens door. Daar hebben ze het toch echt over een block-level element en niet een box-element… :?

[quote:208c5937ed="kaydie"][quote:208c5937ed="ReaLX"]Hmm, niet zozeer blocklevel elementen. zolang het maar een bounding box heeft. Een float is standaard een inline element en daar is ook prima de overflow te regelen ;)

oftewel: elk [b:208c5937ed]box[/b:208c5937ed]-element heeft een overflow property.[/quote:208c5937ed]
Ok… Lees citaat 11.1.1 Overflow: the ‘overflow’ property uit de CSS 2.1 Specification eens door. Daar hebben ze het toch echt over een block-level element en niet een box-element… :?[/quote:208c5937ed]

lees dan meteen even verder :stuck_out_tongue:

[quote:208c5937ed]
‘overflow’
Value: visible | hidden | scroll | auto | inherit
Initial: visible
Applies to: non-replaced block-level elements, [b:208c5937ed]table cells, and inline-block elements[/b:208c5937ed]
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
[/quote:208c5937ed]

block element en block-level element is totaal iets anders. Om in IE woorden te praten: de box moet “layout” hebben. Een inline float (wat die standaard is) kan dus gewoon overflow meekrijgen.

Als je het al eens gedaan hebt, dan zou je dat gewoon weten… beetje vreemd… :sealed: