css liquid layout
ik ben me wat aan het verdiepen in liquid layout maar ik ben op een klein probleem gestoten.
voorbeeld: http://www.jeugdranst.be/templates/Jeugdranst2/index.php
Nu staat alles er mooi op, alleen de licht groen gekleurde blok doet niet wat het zou moeten doen.
Dien blok is eigenlijk nen container waarin de sidebar en content zitten maar ik zou ervoor willen zorgen dat die even hoog is al de sidebar. Dat die dus de hoogte van de sidebar of de content volgt.
Ik heb al menig tutorial afgezuimt naar een oplossing maar nog geen enkele gevonden waar dit wordt behandeld.
Iemand een idee hoe je dit moet oplossen?
alvast bedankt
de css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#header {
border:#FF0000 1px solid;
height: 100px;
}
#container {
border:#00FF00 1px solid;
background-color:#00FF33;
position:relative;
}
#content {
border:#0000FF 1px solid;
margin-left:70px;
position:relative;
}
#sidebar {
border:#000000 1px solid;
height: 300px;
width:61px;
float:left;
position:relative;
}
#footer {
border:#FF6699 1px solid;
}
#clear {
clear:both;
}
border:#FF0000 1px solid;
height: 100px;
}
#container {
border:#00FF00 1px solid;
background-color:#00FF33;
position:relative;
}
#content {
border:#0000FF 1px solid;
margin-left:70px;
position:relative;
}
#sidebar {
border:#000000 1px solid;
height: 300px;
width:61px;
float:left;
position:relative;
}
#footer {
border:#FF6699 1px solid;
}
#clear {
clear:both;
}
is er geen manier om dit te doen zonder een image te gebruiken?
Je container div geef je dan naast die afbeelding (die de achtergrond voor beide kolommen vormt) ook nog een achtergrond kleur die dezelfde is als de kleur van de content kolom in de afbeelding. Op die manier zie je geen verschil als de site in breedte verandert.