[CSS] Div-jes kolommen meegroeien

Pagina: 1
Acties:

  • naartem
  • Registratie: September 2005
  • Laatst online: 23-03 08:48
Ik ben nieuw op het gebied van werken met div-jes. Misschien is dit wel een hele simpele vraag maar ik zie door de grote hoeveelheid bomen het bos niet meer... O-)

Wat ik wil is een pagina die opgebouwd is op de volgende manier:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
+--------------------------------------------------+
|                         Header                   |
|--------------------------------------------------|
|            |                      |              |
|  kolom1    |        Kolom2        |    kolom3    |
|  180px     |       meegroeien     |    180px     |
|            |                      |              |
|            |                      |              |
|            |                      |              |
|            |                      |              |
+--------------------------------------------------+
|                         Footer                   |
|--------------------------------------------------|


Deze div-jes staan in een parent div die ik gecentreerd heb en waarbij ik een max-width en min-width heb ingesteld. Dit werkt verder goed.
Doordat de pagina dus tot een bepaalde resolutie (920 px) mee kan groeien wil ik dat de middelste kolom (kolom2) ook meegroeit. De 2 kolommen die er naaste staan (kolom 1 en 3) hebben een vaste width van 180 px.
Wat mij dus niet lukt is het laten meegroeien van die middelste kolom. Ik heb gezocht via google en Got maar alles wat ik vind gaat over kolommen die niet meegroeien en een vaste waarde (width) hebben.
Kan iemand mij hier misschien mee helpen, vertellen waar ik het antwoord kan vinden of waar ik op moet zoeken? :)

  • Keeper
  • Registratie: Juni 2001
  • Niet online

Keeper

<3 Ruby

http://www.thenoodleincid...als/box_lesson/boxes.html

Verder kan je kijken op "liquid layout" oid.

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

http://jaap.deviousness.com/testcases/engine/css/3col.html . Aangezien #links en #rechts fixed zijn wordt dat zoiets:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 /* code zoals 'ie was plus */
div#left {
    width: 180px;
}
 
div#content {
    background-color: lime;
    width: 45%; /* 100% - #right::width - #left::width */
    margin: 0 180px 0 180px; /* 0 #right:width 0 #left::width */
}
 
div#right {
    width: 180px;
}
:) .

DM!