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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Next-level Java Developer functie, veel verantwoor

Bedrijfsomschrijving Mobile Development en Ops Engineering gaan hand in hand bij deze organisatie dat een hoog verantwoordelijkheidsgevoel draagt. Als organisatie ontwikkelt zij dan ook veelal mobiele applicaties ter inspiratie en ondersteuning van belangrijke sectoren in Nederland. Met het technische team van gepassioneerde developers en engineers voeren ze dagelijks veelal diverse, inspirerende en complexe werkzaamheden uit waarbij zij als Java ontwikkelaar interessante software realiseert. Door gebruik van innovatieve software en de nieuwste platformen binnen de sector is deze klant dan ook zeker als vooruitstrevend te betitelen waar zijn enorm veel waarde aan hecht. Functieomschrijving Je werkt aan innovatieve producten binnen een

Bekijk vacature »

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

29/11/2020 07:58:04
 
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.