3 divs (px, %, px) niet onder elkaar
Ik wil 3 divs naast elkaar hebben.
De linker en rechter moet een vast aantal pixels hebben.
De middelste moet de rest van het scherm opvullen.
Dit lukt me en is dus geen probleem (http://jsfiddle.net/fqJA3/).
Nu wil ik alleen dat als het scherm smaller wordt, dat ze niet onder elkaar komen. En dat de buitenste 2 divs dat wel als procent worden beschouwd.
Is dit mogelijk?
Of moet ik maar denken, als de gebruiker het leuk vindt om zijn browser 500 pixels breed te maken komt het maar onder elkaar.
Reshad F op 18/10/2013 10:08:37:
je moet ze nu al van procenten voorzien ipv pixels
Hier heb ik niet voor gekozen omdat de buitenste 2 divs een menu hebben dat precies 200 pixels breed is.
Dit is zo gemaakt dat het niet mooi is als deze worden uitgerekt.
Voorbeeld, bij jou.
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
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
#container{
overflow: hidden;
width: 100%;
}
#left{
float: left;
background: #FF0000;
width: 200px;
}
#right{
float: right;
background: #00FF00;
width: 200px;
}
#center{
background: #0000FF;
overflow: hidden;
}
@media screen and (max-width:500px) {
#left {
width: 33%;
}
#right {
width: 33%;
}
#center{
width: 33%;
}
}
overflow: hidden;
width: 100%;
}
#left{
float: left;
background: #FF0000;
width: 200px;
}
#right{
float: right;
background: #00FF00;
width: 200px;
}
#center{
background: #0000FF;
overflow: hidden;
}
@media screen and (max-width:500px) {
#left {
width: 33%;
}
#right {
width: 33%;
}
#center{
width: 33%;
}
}
Dus, onderaan je css voeg je eigenschappen toe die enkel gebeuren wanneer (max-width:500px).
Alles wat gemeenschappelijk blijft, moet je niet dubbel zetten.