[XHTML/CSS] Divs, kolommen en containers - Softwareontwikkeling

woensdag 12 januari 2005 15:59

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

Ik snap er niks meer van

Ik heb een container div (class: dvContent) met daarin 2 div's (classes: dvLeftCol, dvRightCol). Dit zorgt voor een 2 kolom brede opmaak. De pagina is verdeeld in 3 "hoofd" divs:

code:

+=================================+
|                                 |
|             dvHeader            |
|                                 |
+---------------------------------+
|                                 |
|                                 |
|             dvContent           |
|                                 |
|                                 |
+---------------------------------+
|                                 |
|             dvFooter            |
|                                 |
+=================================+

dvContent bevat op zijn beurt weer 2 kolom divs:

code:

+---------------------------------+
|dvContent                        |
|+---------------++--------------+|
||               ||              ||
||               ||              ||
|| dvLeftCol     || dvRightCol   ||
||               ||              ||
||               ||              ||
|+---------------++--------------+|
+---------------------------------+

Het geheel staat nog in een Div (dvMain) die in essentie niets anders doet dan de pagina centreren. Ook zonder deze div treedt het probleem op...

Als ik dit ga bekijken in IE6 (SP1) dan ziet het er prima uit, ga ik kijken in FireFox, dan is er een probleem met dvContent.

Het probleem:
dvContent zou (omdat dvLeftCol en dvRightCol er in zitten) toch verticaal moeten "groeien" als 1 van de 2 kolommen, of beide, langer worden?
In IE werkt dit prima, Firefox daarentegen trekt zich daar opeens echter niks van aan.

Ik heb het even gereduceerd tot de hoofdzaak:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <title>EDIMail.nl</title>
    </head>

    <body>
        <div class="dvMain">
            <!-- Content -->
            <div class="dvContent">
                <div class="dvLeftCol">
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                </div>
                <div class="dvRightCol">
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                    <p>bla bla bla lange tekst hier</p>
                </div>
            </div>
        </div>
    </body>
</html>

Cascading Stylesheet:

Body, Html {
    background-color: #999999;
    color: #000000;
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
    margin: 0px;
}

Div.dvMain {
    margin: auto;
    width: 770px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background-color: #ffffff;
    background-image: url(../img/top_left.gif);
    background-repeat: no-repeat;
    background-position: top left;
}

Div.dvContent {
    width: 770px;
    background-image: url(../img/cnt_back.gif);
    background-repeat: no-repeat;
    background-position: bottom left;
    padding-top: 10px;
    padding-bottom: 10px;
}

Div.dvLeftCol {
    padding-left: 45px;
    width: 330px;
    float: left;
    padding-bottom: 230px;
}

Div.dvRightCol {
    padding-right: 45px;
    width: 330px;
    float: right;
}

De XHTML is valid, [url=http://offline]zoals je kunt zien[/url]. Ik heb een test-case online gezet ter inzage op: hier_stond_een_test_url <<- Offline

Overigens, als ik van dvLeftCol en dvRightCol de float weg haal groeit dvContent wél mee

Het heeft geheid daar iets mee te maken, maar wat... beats me. Ik heb al gestoeid met margins, paddings, breedtes, hoogtes enzovoorts. Heb ook al even gekeken naar dvColLeft, die heeft namelijk een extra padding, om zo het plaatje dat in dvContent zit te "beschermen" zodat er geen tekst over heen gaat lopen. Ook hier ligt het niet aan. Het grappige is, als je de div's er uit sloopt (regels 13,19,20 en 26 uit de voorbeeld HTML hierboven) dan werkt het wél prima (dvContent groeit dan wel mee... je kolommen ben je kwijt natuurlijk

).

Waarom dit zo'n probleem is? Omdat dvContent een achtergrondplaatje bevat, left bottom aligned. Dat plaatje hoort namelijk boven de footer te blijven. En beide kolommen zijn niet vast qua tekstlengte, dus moet dvContent verticaal "meegroeien".

Normaal ben ik redelijk mans genoeg om mijn eigen html/css zaakjes op te lossen, maar deze ontgaat me effe

Iemand enig idee waar ik over heen kijk?

edit: Ik heb zojuist effe de uitgeklede versie in [url=http://offline]een zipfile gegooid[/url] (3Kb), die is overzichtelijker om te bekijken.

offtopic:
"vroegah" had ik dit opgelost met een table, maar daar probeer ik steeds meer van af te blijven

[ Voor 44% gewijzigd door RobIII op 27-01-2005 12:53 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 12 januari 2005 16:04

Acties:

Willem

Gooi de width {} van de div#dvMain es weg?

Motor (of auto) onderhoud bijhouden

woensdag 12 januari 2005 16:09

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

willem169 schreef op woensdag 12 januari 2005 @ 16:04:
Gooi de width {} van de div#dvMain es weg?

* RobIII checkt het effe...
...dat haalt niks uit... maar je klinkt zo zelfverzekerd dat ik begin te twijfelen

mis ik iets?
Sterker: ik heb de width ook groter geprobeerd (1px, 10px...), op dvMain en dvContent. Dit omdat er een border op dvMain zit, en ik weet nooit of ik die nou juist wél of juist niet in de totale width moet meetellen

[ Voor 36% gewijzigd door RobIII op 12-01-2005 16:14 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 12 januari 2005 16:15

Acties:

Rickets

Finger and a shift

Clear: both toevoegen aan dvFooter lijkt te helpen

Cascading Stylesheet:

Div.dvFooter
{
   clear   : both; /* <--------- */
   width   : 770px;
   height  : 44px;
}

[ Voor 18% gewijzigd door Rickets op 12-01-2005 16:16 ]

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 12 januari 2005 16:16

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

Rickets schreef op woensdag 12 januari 2005 @ 16:15:
Clear: both toevoegen aan dvFooter lijkt te helpen

AARGH!

Dat ga je niet menen!

* RobIII checkt het effe
(*@#(&*%!@#)*& je hebt gelijk

$_/-\o_$ dat had érg lang zoeken kunnen worden

Het stomme is, ik heb dit al zooo vaak gebruikt (recentelijk nog zelfs). Snap niet waarom ik nou opeens die clear vergeet

Ach, soms staar je zo lang je zo blind op je spul dat je vergeet verder te kijken dan je neus lang is. Thanks!

Rickets schreef op woensdag 12 januari 2005 @ 16:20:
Geeft niks, daar heb je dit forum voor
Misschien dat je het hierdoor de volgende keer niet meer vergeet

Reken maar

[ Voor 96% gewijzigd door RobIII op 12-01-2005 16:21 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 12 januari 2005 16:20

Acties:

Rickets

Finger and a shift

Geeft niks, daar heb je dit forum voor

Misschien dat je het hierdoor de volgende keer niet meer vergeet

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 12 januari 2005 16:23

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

Rickets schreef op woensdag 12 januari 2005 @ 16:20:
Geeft niks, daar heb je dit forum voor
Misschien dat je het hierdoor de volgende keer niet meer vergeet

Damned, te vroeg gejuichd

Nu gaat me plaatje niet mee naar beneden

maar daar kom ik wel uit...denk ik...
...
fix0red

[ Voor 5% gewijzigd door RobIII op 12-01-2005 16:26 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij