[CSS/HTML/DIV] Div verneukt ancestor (tabel)

[Verwijderd]

Ha allen,

Wat zojuist met een webstekkie bezig en liep tegen het volgende probleem aan. Een div die ik nest binnen een tabel en plaats met relative positioning verneukt de tabel (ancestor) waar hij in staat als de height hoger wordt dan de height van de tabel.

Voorbeeld 1 (correcte weergave, hoogte van div alleen te klein)
Voorbeeld 2 (hoogte van div is nu correct, weergave alleen verneukt)


De code is hieronder weergegeven. Het probleem ligt hem dus in het feit dat de height van div.menu_right (350px) hoger is dan de height van cell td.bg_right (261px) en hiermee de cel hoogte aanpast.

Weet iemand een oplossing?

Groeten

HTML:

<style>
div.menu_right {
  position:relative;
  width:245px;
  height:350px;
  top:206px;
  left:110px;
  background-color:purple;

}

td.bg_left {
  
  background-color:blue;
  text-align:right;
  width:400px;
  height: 261px;
}

td.bg_right {
  
  background-color:gray;
  text-align:left;
  width:400px;
  height: 261px;
}
</style>

<table cellspacing="0" cellpadding="0" width="100%">

    <tr>
        <td valign="top" class="bg_left">
        left
        </td>
        <td valign="top" class="bg_right">
         right
            <div class="menu_right">
                DIV problem
            </div>
        </td>       
    </tr>
</table>

[ Voor 25% gewijzigd door Verwijderd op 02-06-2009 11:01 ]

[MoietyMe]

Wat probeer je te bereiken? Want je code is echt een tering zooi. Tables in tables?

[Verwijderd]

Good Fella schreef op dinsdag 02 juni 2009 @ 10:57:
Wat probeer je te bereiken? Want je code is echt een tering zooi. Tables in tables?

Probeerde niet zozeer met dit voorbeeld iets te bereiken. Ik heb het even simpeler gemaakt.

[Barleone]

Als je even wat borders op je td's en divs zet, kunnen we wat beter zien welke rare dingen zich voordoen. Ik ben niet zo goed met het zien van onzichtbare td's.
- Ik zie het al (IE developer) -

Als ik je position:relative van je DIV afhaal, gaat hij gezellig de TD in. Is dat wat je wilt?

Lees o.a. wat crisp hieronder daarvan zegt. Wat ik nog wil toevoegen is, dat de DIV wel EXACT zo hoog is als de TD (met uitzondering van de regel tekst die de TD hoger maakt). Alleen verplaatst hij zich op het laatste moment door de position:relative.

[ Voor 62% gewijzigd door Barleone op 02-06-2009 11:14 . Reden: mogelijke oplossing ]

[trinite_t]

Ik weet niet wat je wilt bereiken, maar als ik denk wat je wilt doen, nl een menu maken, denk ik dat je met deze aanpak op de verkeerde weg bent. Een menu kun je beter maken mbv een list. Verder is een schetsje met wat je wilt misschien handig...

[crisp]

Je snapt blijkbaar gewoon niet wat relative positioning inhoud. Een relatief gepositioneerd element wordt in eerste instantie gerendered op de plek waar hij normaal gesproken zou staan en vervolgens 'verplaatst' aan de hand van de top en left directives zonder daarbij verder nog invloed uit te oefenen op de rest van de flow.

Kortom: het gedrag dat je div hier vertoond is gewoon correct. Als dat niet is wat jij voor ogen hebt dan is relative positioning waarschijnlijk niet de manier om dat te bereiken

[DeluxZ]

crisp is right. Je positie relatief met je left en top duwt je div naar rechts en naar beneden in de TD, zoals crisp hierboven zegt is dit gewoon goed.

[Verwijderd]

crisp schreef op dinsdag 02 juni 2009 @ 11:10:
Je snapt blijkbaar gewoon niet wat relative positioning inhoud. Een relatief gepositioneerd element wordt in eerste instantie gerendered op de plek waar hij normaal gesproken zou staan en vervolgens 'verplaatst' aan de hand van de top en left directives zonder daarbij verder nog invloed uit te oefenen op de rest van de flow.

Kortom: het gedrag dat je div hier vertoond is gewoon correct. Als dat niet is wat jij voor ogen hebt dan is relative positioning waarschijnlijk niet de manier om dat te bereiken

Ha crisp,

hmmm, ik was alleen in de veronderstelling dat het wel mogelijk zou zijn het geplaatste element te laten 'overflowen' uit het geneste element.

Als dit niet mogelijk is vraag ik me af hoe ik het beste een element zou kunnen plaatsten op precies deze locatie waar hij nu staat. Absolute positioning vanaf de body is niet zo makkelijk mogelijk omdat de website gecentreerd is.

[crisp]

Verwijderd schreef op dinsdag 02 juni 2009 @ 11:15:
[...]

Als dit niet mogelijk is vraag ik me af hoe ik het beste een element zou kunnen plaatsten op precies deze locatie waar hij nu staat. Absolute positioning vanaf de body is niet zo makkelijk mogelijk omdat de website gecentreerd is.

Absolute positioning is toch wel een optie en hoeft niet relatief tov de body te zijn. Absolute positioning is juist relatief tov een containing block en dat kan ook een ancestor-element zijn met een position anders dan de default 'static' (bijvoorbeeld 'relative' )

[Verwijderd]

crisp schreef op dinsdag 02 juni 2009 @ 11:21:
[...]

Absolute positioning is toch wel een optie en hoeft niet relatief tov de body te zijn. Absolute positioning is juist relatief tov een containing block en dat kan ook een ancestor-element zijn met een position anders dan de default 'static' (bijvoorbeeld 'relative' )

Ik ga knutselen.

Bizar was dat bij Firefox de div wel gewoon hoger kan zijn dan de cell waar hij in 'neste'. Zolang je maar niet via je stylesheet je height meegeeft en de inhoud van de div de hoogte laat bepalen gaat alles prima. Is blijkbaar de leniency van Firefox dat dit werkte :-).

Bedankt!