[css] Overflow:visible; maar div wordt niet groter

[RwD]

Hier is momenteel het probleem te zien waar ik niet uit lijk te komen.

Het rode vlak heeft in de stylesheet de "overflow" op "visible" staan, en zoals te zien aan de (voor velen bekende) tekst werkt de overflow naar behoren. Maar de container div die hier omheen staat vergroot zich niet terwijl deze ook "overflow:visible" in de stylesheet heeft. Om het duidelijk te zien dat de container niet groter wordt heb ik er een lijn omheen gezet.

Ik kan niet vinden waarom dat de div niet gewoon mee vergroot. Dat heb ik tenslotte toch aangegeven graag te willen?

Ook een probleem is dat in FireFox het rode vlak uberhaupt niet mee vergroot!!

De gehele css

Cascading Stylesheet:

/* De relevante css */
#Container {
    position         : absolute;
    left             : 50%;
    width            : 600px;
    height           : 400px;

    overflow         : visible;

    border           : solid 1px #000000;
    
    margin-left      : -300px;
    padding          : 0;
}

#mainContent {
    position         : absolute;
    top              : 40px;
    left             : 100px;
    width            : 500px;
    height           : 360px;
    
    overflow         : visible;
    
    background-color : #CC3333;
    margin           : 0;
    padding          : 0;
}

#mainSide {
    top              : 0;
    left             : 0;
    width            : 100px;
    height           : 360px;
    
    background-color : #33CC33;
    margin           : 0;
    padding          : 0;
}

#mainHeader{
    height           : 40px;
    
    background-color : #3333CC;
    margin           : 0;
    padding          : 0;
}

HTML:

<!-- Relevante HTML code -->
<div id="Container">
    <div id="mainHeader">
        <div id="HdrMenu">
            <h2 class="SiteTitle">Menu</h2>
            <ul>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Lawyers</a></li>
                <li><a href="#">Areas of Practice</a></li>
                <li><a href="#">How to find us</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

    <div id="mainSide">&nbsp;</div>

    <div id="mainContent">
        <h3>The Road to Enlightenment</h3>
        <p>Littering a dark and ...  learn from your work.</p>
    </div>
</div>

[ Voor 39% gewijzigd door RwD op 11-11-2004 21:49 ]

[chris]

Wil je niet eigenlijk min-height gebruiken ipv overflow: visible?

[wicher|IA]

Dat is toch ook juist wat overflow: visible; doet.
Het maakt het gene dat buiten de div valt zichtbaar.
Buiten de div dus, de div zelf blijft even groot (zoals je ziet) maar de tekst die erbuiten doorloopt is wel zichtbaar.

Is het niet zo dat als je die regel weghaalt de div gewoon meebeweegt, zoals je wilt? (Of is dat alleen bij td's zo?)

[Verwijderd]

min-height is idd je vriend... In IE gedraagt 'height' zich sowieso als 'min-height' (mits overflow=visible) dus daar hoef je je geen zorgen over te maken.

Cascading Stylesheet:

.myClass {
    height:200px; /* IE */
    min-height:200px; /* Moz */
    overflow:visible;
}

[RwD]

Verwijderd schreef op 10 november 2004 @ 23:38:
min-height is idd je vriend... In IE gedraagt 'height' zich sowieso als 'min-height' (mits overflow=visible) dus daar hoef je je geen zorgen over te maken.

Nee hoor min-height gedraagt zich niet als hiegt in IE; als ik dat voor het groene vlak verander (height => min-height) dan wordt ie nog maar 1 regel groot. Met beide declaraties werkt dat ook niet voor het groene vlak. Met combinaties van min-height en height kon ik firefox wel zover krijgen dat ie ook het rode geeelte uitbreidt, maar niet dat de container (die met dat lijntje) ook groter wordt!!

wicher schreef op 10 november 2004 @ 22:40:
Dat is toch ook juist wat overflow: visible; doet.
Het maakt het gene dat buiten de div valt zichtbaar.
Buiten de div dus, de div zelf blijft even groot (zoals je ziet) maar de tekst die erbuiten doorloopt is wel zichtbaar.

Is het niet zo dat als je die regel weghaalt de div gewoon meebeweegt, zoals je wilt? (Of is dat alleen bij td's zo?)

"De waarde visible zorgt ervoor dat afmetingen van de box zo worden aangepast, dat de gehele inhoud van het element toch zichtbaar blijft. Een eventuele padding of border valt buiten de weergegeven inhoud."
Zo van handleing HTML

Dat is niet alleen bij td's zo, bij divs en alle andere elementen zou dat standaard ook zo moeten zijn.

----

Ok, ik ben dus 1 stap verder; Firefox en IE laten hetzelfde zien. Maar beide onjuist als ik de stylesheet regels bekijk!!

[chris]

Ik gok dat je deze link ook nog wil checken. Het is niet de meest behapbare stof die er is, maar wel wat jij wil. Denk ik.

[crisp]

RwD schreef op 11 november 2004 @ 06:55:
[...]
Nee hoor min-height gedraagt zich niet als hiegt in IE; als ik dat voor het groene vlak verander (height => min-height) dan wordt ie nog maar 1 regel groot. Met beide declaraties werkt dat ook niet voor het groene vlak. Met combinaties van min-height en height kon ik firefox wel zover krijgen dat ie ook het rode geeelte uitbreidt, maar niet dat de container (die met dat lijntje) ook groter wordt!!

height in IE gedraagt zich wel degelijk als min-height in die zin dat het de div uitrekt bij grotere content; echter geldt dit niet als je overflow specificeerd!
Voor non-IE browsers moet je er ook rekenig mee houden dat je de height terugzet naar auto:

Cascading Stylesheet:

#container {
  width: 400px;
  height: 600px;
}
body>#container { /*ervan uitgaande dat de body de directe parent is */
  height: auto;
  min-height: 600px;
}

[...]
"De waarde visible zorgt ervoor dat afmetingen van de box zo worden aangepast, dat de gehele inhoud van het element toch zichtbaar blijft. Een eventuele padding of border valt buiten de weergegeven inhoud."
Zo van handleing HTML

Dat klopt dus niet...

Dat is niet alleen bij td's zo, bij divs en alle andere elementen zou dat standaard ook zo moeten zijn.

Nee, het tablemodel is anders dan het boxmodel.

[RwD]

crisp schreef op 11 november 2004 @ 08:25:
[...]

height in IE gedraagt zich wel degelijk als min-height in die zin dat het de div uitrekt bij grotere content; echter geldt dit niet als je overflow specificeerd!
Voor non-IE browsers moet je er ook rekenig mee houden dat je de height terugzet naar auto:

Cascading Stylesheet:

#container {
  width: 400px;
  height: 600px;
}
body>#container { /*ervan uitgaande dat ... */
  height: auto;
  min-height: 600px;
}

...

Ok, ik zal mijn ideeen bijstellen

Maar, met jouw suggestie werkt het evengoed niet
Na even alle variabelen nog eens doorgelopen te hebben met de handleining denk ik zelf dat "position:absolute" van de mainContent de spelbreker is. Als ik die weg haal of in relative verander dan vergroot de Container gewoon mee.

Het voorbeeld hier is nu met de verandering in de stylesheet zoals jij gaf. (de directe parent van Container is idd body)

[ Voor 5% gewijzigd door RwD op 11-11-2004 21:53 ]

[crisp]

als je nu dit gebruikt om te centreren:

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  height: 600px;
  text-align: left;
}
body>#container {
  height: auto;
  min-height: 600px;
}

[RwD]

Nee helaas

Ik denk echt dat ik met die andere twee divs moet gaan spelen om het goed te krijgen. Het is toch die "position:absolute" die de div zomaar binnen zn parent gaat positioneren? Verliest de container daarom niet zn gevoel voor afmetingen van zn kind elementen?

Crisp, je naam is groen, ben ik ziek geworden

[ Voor 27% gewijzigd door RwD op 11-11-2004 09:07 ]

[vulcan]

RwD schreef op 11 november 2004 @ 09:01:
Crisp, je naam is groen, ben ik ziek geworden

offtopic:
Hij is Developer/Moderator W&G

Tot zover mijn nuttige bijdrage aan dit topic

[RwD]

Ik heb de css wederom aangepast. Het lijkt also het werkt, MAAR...
Het probleem is verplaatst eigenlijk. Als het groene vlak te groot wordt gebeurd weer hetzelfde als met het groene, bovendien heb ik nu een marge boven en onder het rode vlak over terijl de padding overal op 0 staat.

Ik had eigenlijk deze problemen niet verwacht, dit lijkt me vrij standaard in opzet. Heeft niemand anders dit zo gemaakt

Cascading Stylesheet:

#Container {
    position         : relative;
    width            : 600px;
    height           : 400px;
                     
    border           : solid 1px #000000;
                     
    text-align       : left;
                     
    margin-left      : auto;
    margin-right     : auto;
    padding          : 0;
}                    
                     
body>#container {         
    width            : 600px;
    height           : auto;
    min-height       : 400px;
                     
    border           : solid 1px #000000;
                     
    text-align       : left;
                     
    padding          : 0;
}                    
                     
#mainContent {             
    position         : relative;
    top              : 0px;
    left             : 100px;
    width            : 500px;
    min-height       : 360px;
                     
    overflow         : visible;
                     
    margin           : 0;
    padding          : 0;
}                    
                     
#mainSide {             
    position         : absolute;
    top              : 40px;
    left             : 0;
    width            : 100px;
    height           : 360px;
                     
    margin           : 0;
    padding          : 0;
}                    
                     
#mainHeader{             
    height           : 40px;
                     
    margin           : 0;
    padding          : 0;
}

[RwD]

Zo te zien heb ik het te pakken in voor IE, dit werkt echter niet in Firefox. Ik ben erg benieuwd wat ik of IE fout hebben gedaan of waarom Firefox meent het anders weer te mogen geven.

Dit is de stylesheet

Cascading Stylesheet:

#Container {
    position          : relative;
    width             : 600px;
    height            : 400px;

    border            : solid 1px #000000;
    
    text-align        : left;

    background-color  : #CCCCCC;
    margin-left       : auto;
    margin-right      : auto;
    padding           : 0;
}

body>#container {
    width             : 600px;
    height            : auto;
    min-height        : 400px;
    
    border            : solid 1px #000000;

    text-align        : left;
    
    background-color  : #CCCCCC;
    padding           : 0;
}

#mainContent {
    top               : 0px;
    left              : 100px;
    width             : 498px;
    min-height        : 360px;
    
    overflow          : visible;
    float             : left;
    background-color  : #CC3333;
    margin            : 0;
    padding           : 0;
}

#mainSide {
    top               : 40px;
    left              : 0;
    width             : 100px;
    height            : 1860px;
    float             : left;
    background-color  : #33CC33;
    margin            : 0;
    padding           : 0;
}

[RwD]

Weet iemand waarom Firefox in dit niet het container element meerekt en IE wel in dit voorbeeld?

Ik heb al heel veel combinaties van overflow, display en position geprobeerd maar de juiste combinatie heb ik nog niet gevonden

[ Voor 49% gewijzigd door RwD op 13-11-2004 13:40 ]

[Verwijderd]

als je je element op position: absolute; of float: iets; zet wordt ie uit de flow gehaald, dus het parent element houdt dan geen rekening meer met de afmetingen ervan (bij floats worden wel inline childs aan de kant geschoven daardoor)

Ik krijg door dit alles de indruk dat je het hele visual formatting model van CSS nog niet goed doorhebt, misschien is het handigste om dat nog eens goed door te lezen

edit: linkjes
http://www.w3.org/TR/CSS21/visuren.html
http://www.w3.org/TR/CSS21/visudet.html

[ Voor 11% gewijzigd door Verwijderd op 13-11-2004 14:42 ]

[RwD]

Verwijderd schreef op zaterdag 13 november 2004 @ 14:39:
als je je element op position: absolute; of float: iets; zet wordt ie uit de flow gehaald, dus het parent element houdt dan geen rekening meer met de afmetingen ervan (bij floats worden wel inline childs aan de kant geschoven daardoor)

Dat heb ik niet gelezen, wel staat er dat ze helemaal naar links of rechts worden geschoven voor zover daar plaats is, en dan naar beneden totdat het past. Bij absolute worden elementen helemaal uit de flow gehaald (tenminste, dat las ik)

Ik krijg door dit alles de indruk dat je het hele visual formatting model van CSS nog niet goed doorhebt, misschien is het handigste om dat nog eens goed door te lezen

edit: linkjes
http://www.w3.org/TR/CSS21/visuren.html
http://www.w3.org/TR/CSS21/visudet.html

De links heb ik helemaal gelezen, en ze hebben me niet geholpen het probleem op te lossen maar....

Ik kwam er achter als ik voor de Container overflow op scroll zette Firefox de Container wel uitstrekte (met een scollbalk waarmee niks te scrollen valt ) hierop voort bordurend heb ik de waarde hidden geprobeerd. ipv het verwachte afkapping van de rode content, werd ineens alles getoont.

Dit lijkt me geen mooie oplossing, maar kan iemand me vertellen waarom dit werkt en of er een betere manier is?

dit is trouwens een stuk uit de stylesheet:

Cascading Stylesheet:

#Container {      
    width        : 600px;
    height       : 400px;
    border       : solid 1px #000000;
    text-align   : left;
    margin-left  : auto;
    margin-right : auto;
    padding      : 0;
}

body>#Container {
    width        : 600px;
    height       : auto;
    min-height   : 400px;
    border       : solid 1px #000000;
    text-align   : left;
    padding      : 0;
    overflow     : hidden;
}

#mainContent {
    top          : 0px;
    left         : 100px;
    width        : 488px;
    min-height   : 360px;
    overflow     : visible;
    float        : left;
    margin       : 0;
    padding      : 6px;
}

#mainSide {
    top          : 40px;
    left         : 0;
    width        : 100px;
    height       : 1360px;
    float        : left;
    margin       : 0;
    padding      : 0;
}

#mainHeader{
    height       : 40px;
    margin       : 0;
    padding      : 0;
}

[Verwijderd]

die link werkt niet (zet het goeie ip er even in ipv localhost), verder vind ik dit bijzonder raar gedrag, zeker van firefox, weet je zeker dat ie in standardsmode werkt?

verder doelde ik op de 4e paragraaf in het floats gedeelte:
http://www.w3.org/TR/CSS21/visuren.html#floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist

maar dat lijkt me ondertussen wel duidelijk

je kan dit redelijk makkelijk oplossen door een <br style="clear: both;"> na je floats te zetten, die moet nl geforceerd onder de floats komen, maar zit zelf wel in de flow, dus box er omheen rekt wel op

[RwD]

Verwijderd schreef op zondag 14 november 2004 @ 18:04:
die link werkt niet (zet het goeie ip er even in ipv localhost), verder vind ik dit bijzonder raar gedrag, zeker van firefox, weet je zeker dat ie in standardsmode werkt?

Ik had niet echt op die link gelet, stomme fout, maar gecorrigeerd. Waarom Firefox dat doet, geen idee. Voor zover ik weet zit firefox in standardsmode. Alles wat ik er voor nodig heb is die header toch, zonder er iets voor? Ik doe verder geen speciale dingen, dus ik neem aan dat ie strict blijft zijn...

verder doelde ik op de 4e paragraaf in het floats gedeelte:
http://www.w3.org/TR/CSS21/visuren.html#floats

[...]

maar dat lijkt me ondertussen wel duidelijk

Ik wil niet echt met je in discussie gaan er over omdat ik er idd niet alles van weet, maar als ik die tekst interpreteer staat er niet dat ie buiten zn containing element gaat vallen. Bovenaan staat nog "In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible." en weer verderop staat dat alleen absolute gepositioneerde elementen echt buiten de flow vallen (alhoewel idd gezegd wordt dat floats uit de flow worden gehaald....

je kan dit redelijk makkelijk oplossen door een <br style="clear: both;"> na je floats te zetten, die moet nl geforceerd onder de floats komen, maar zit zelf wel in de flow, dus box er omheen rekt wel op

Maar de br tip, dat deed het hem, kan ik zonder de naar mijn idee vreemde overflow:hidden setting toch bereiken wat ik wilde. Bedankt.

[ Voor 12% gewijzigd door RwD op 14-11-2004 20:19 ]