[html/css] 2 kolommen in containing div

[Pelle]

Aaargh, ik wordt helemaal gek hier. Eerst eens even een voorbeeldje van wat ik wil:



Oftewel, een header, een menu, een stukje content en een footer. Het menu heeft een achtergrond-kleur, en de bedoeling is dat de div met dat menu erin, meestretched als de content langer is dan het menu.

Het menu en de content heb ik in een containing div geplaatst, en die containing div is -net zoals de header en footer- relatief gepositioneerd.

Wat ik nu heb gedaan, is het menu en de content ook allebei relatief positioneren, en daarbij de containing div een background-image geven, zodat het in principe niet uitmaakt hoe hoog het menu is, aangezien de containing div een background-image heeft die verticaal gerepeat wordt.

Dit is de source die ik gebruik:

code:

    <div id="header">woei</div>
    
    <div id="container">
        <div id="menu">melp</div>
        <div id="content">knel</div>
    </div>
    
    <div id="footer">vvt</div>

..met de bijbehorende styles:

code:

        div#header {
            position            :   relative;
            width               :   760px;
            border              :   1px solid #000000;
        }
        
        div#container {
            position            :   relative;
            width               :   760px;
            border              :   1px solid #000000;
            background-image    :   url('images/bg_content.gif');
            background-repeat   :   repeat-y;
        }
        
        div#container div#menu {
            position            :   relative;
            float               :   left;
            width               :   180px;
        }
        
        div#container div#content {
            position            :   relative;
            float               :   right;
            width               :   575px;
        }
        
        div#footer {
            position            :   relative;
            width               :   760px;
            border              :   1px solid #000000;
        }

Dit werkt in IE6 en in recente Mozilla en Firebird browsers. Echter, nu Het Grote Probleem: ik heb niet de volle controle over wat er in de content-div komt te staan. Met als probleem dat wanneer de content breder wordt dan 575 pixels, deze div meerekt en in plaats van naast het menu, onder het menu gepositioneerd wordt, en dat is dus iets dat ik niet wil.

Nou vraag ik me 2 dingen af:
1) is het mogelijk om het toch op deze manier op te lossen, maar met wellicht iets andere manier om de menu & content-divs te positioneren?
2) is het wellicht mogelijk om menu & content op de een of andere manier absoluut te positioneren, en daarbij toch menu en content even lang te laten zijn (ivm die background achter menu), zonder daarvoor JS ofzo te hoeven gebruiken?

offtopic:
Ik blijf nog steeds bij dat het W3C niet goed heeft nagedacht over een logische manier van div's positioneren. Hét grootste manco vind ik nog steeds dat wanneer een containing div alleen maar absoluut gepositioneerde div's bevat, die containing div niet daadwerkelijk z'n child-div's omvat, maar gewoon een hoogte van 1 px krijgt.

[André]

Je zult volgens mij de contentkolom op position:absolute moeten zetten en de linkerkant kun je dan met een trucje langer laten lijken.

http://www.alistapart.com/articles/fauxcolumns/

[Verwijderd]

Zoiets misschien?

code:

        div#container {
            position            :   relative;
            width               :   760px;
            border              :   1px solid #000000;
            background-image    :   url('images/bg_content.gif');
            background-repeat   :   repeat-y;
       -height:100px;/*dit waarschijnlijk omdat ie zuigt qua css*/
        }
        
        div#container div#menu {
                left:0px;
                top:0px;
                background-color:yellow;
            position:absolute;
            width               :   180px;
                        height:100%;
                        
        }
        
        div#container div#content {
                        margin-top:0px;                 
                        margin-left:185px;                  
                    background-color:green; 
            width               :   575px;
        }

Ik had eerst iets waarbij #menu float:left had, maar in ie reageert #content daar niet goed op. Deze komt dan een regel te laag; misschien is daar anders ook wel een goed workaround voor

[Clay]

D'r is imo wel een verschil tussen een visueel effect, en het werkelijk hebben van een bepaalde dimensie van een element. Visueel wil je dat die kolommen even lang zijn, qua content is dat gewoon niet zo, dat is ook zo'n beetje het idee van fauxcolumns. Ik zou de CSS van #menu en #content dus zo doen:

Cascading Stylesheet:

div#container div#menu {
    position            :   absolute;
    left                :   0;
    width               :   180px;
}

div#container div#content {
    margin-left         :   180px;
}

En de #container een background geven die het visueel scheidt. Omdat #content dan nog gewoon in de flow zit (en dus niet float) gaat een background op #container ook mee omlaag. Enige waar je op letten moet is dat je menu nooit langer is dan je content. Meestal is content ook altijd langer maar dat kan je evt dus ondervangen met een min-height op #container of #content.

Belangrijke elementen van je layout floaten vind ik persoonlijk niet zo'n super idee. De essentie van float is dat het aan de kant kan gaan als het niet past, en dat wil je in je layout juist niet. Houd het zoveel mogelijk in de flow, en float alleen als het echt nodig is.

[Pelle]

Clay > klopt, het visuele effect is hier belangrijker dan de daadwerkelijke dimensies van de div, alleen ik heb me altijd afgevraagd waarom het W3C nooit iets hieraan gedaan heeft.

Maar goed, min-height lijkt niet te werken in IE6
Ik heb straks dus een probleem als het menu langer wordt dan de content, en er zijn verscheidene pagina's waarbij dit al het geval is.

[André]

Pelle schreef op 08 maart 2004 @ 11:30:
Maar goed, min-height lijkt niet te werken in IE6

Is in IE6 height niet gelijk aan min-height?

[Verwijderd]

Ja dat klopt. Je moet alleen dan wel zorgen dat 'height' weer op 'auto' komt voor browsers die het wel snappen.

(display:table; zou hier trouwens erg mooi passen )

edit:
Merk op dat onderstaande niet goed gaat werken in IE5.0. Lees comments hier: http://annevankesteren.nl...004/02/box-model#comments

[ Voor 41% gewijzigd door Verwijderd op 08-03-2004 13:29 ]

[Clay]

min-height kan je met een selector doen b.v;

Cascading Stylesheet:

#container {
   height:300px;
   min-height:300px;
}

body > #container {
   height:auto;
}

[Verwijderd]

Verwijderd schreef op 08 maart 2004 @ 12:46:
(display:table; zou hier trouwens erg mooi passen )

Behalve dat er (nog?) geen COLSPAN/ROWSPAN mogelijkheden zijn in CSS...

[equationunequal]

min/max height/width in ie:

http://www.doxdesk.com/software/js/minmax.html

[André]

Hankey schreef op 08 maart 2004 @ 14:01:
min/max height/width in ie:

http://www.doxdesk.com/software/js/minmax.html

Pelle schreef op 08 maart 2004 @ 10:13:
2) is het wellicht mogelijk om menu & content op de een of andere manier absoluut te positioneren, en daarbij toch menu en content even lang te laten zijn (ivm die background achter menu), zonder daarvoor JS ofzo te hoeven gebruiken?

Nee dus...

[equationunequal]

André schreef op 08 maart 2004 @ 14:37:
[...]


[...]

Nee dus... [afbeelding]

Sorry, overheen gelezen

Maar waarom eigenlijk zonder js Dit werkt perfect...

[André]

Hankey schreef op 08 maart 2004 @ 14:39:
[...]


Sorry, overheen gelezen

Maar waarom eigenlijk zonder js Dit werkt perfect...

Omdat hij dat graag wil, hij zal er zijn redenen wel voor hebben. Alleen al het feit dat text-browsers het niet ondersteunen kan een reden zijn.

[Willem]

Blues:
Behalve dat er (nog?) geen COLSPAN/ROWSPAN mogelijkheden zijn in CSS...

offtopic:

Hier weet ik nog wel een leuk topicje over Je kunt je afvragen in hoeverre col/row-span te maken heeft met het styleren van je pagina.

[Verwijderd]

Verwijderd schreef op 08 maart 2004 @ 14:00:
[...]

Behalve dat er (nog?) geen COLSPAN/ROWSPAN mogelijkheden zijn in CSS...

Maar dat maakt het niet minder mogelijk. Vooral het feit dat 'height' in een tabel eigenlijk 'min-height' is, zou van pas komen. Zie ook hier: http://lists.w3.org/Archi...w-style/2004Mar/0023.html