3 divs (px, %, px) niet onder elkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tom aan t Goor

Tom aan t Goor

18/10/2013 10:03:20
Quote Anchor link
Hoi,

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.
 
PHP hulp

PHP hulp

17/06/2021 09:30:55
 
Reshad F

Reshad F

18/10/2013 10:08:37
Quote Anchor link
je moet ze nu al van procenten voorzien ipv pixels
 
Tom aan t Goor

Tom aan t Goor

18/10/2013 10:10:41
Quote Anchor link
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.
 
Kris Peeters

Kris Peeters

18/10/2013 11:23:25
Quote Anchor link
Google "Responsive design".

Voorbeeld, bij jou.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
#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%;
  }
}


Dus, onderaan je css voeg je eigenschappen toe die enkel gebeuren wanneer (max-width:500px).
Alles wat gemeenschappelijk blijft, moet je niet dubbel zetten.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.