2 divs naast elkaar met min-width

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Shamrock Modelbouw

Shamrock Modelbouw

19/07/2014 12:03:01
Quote Anchor link
hoi,

Ik heb 2 divs naast elkaar.
Linkse is 20%, rechtste is 80%

Dit werkt goed, behalve dat ik op de linkse een min-width heb ingesteld van 150px. Hoe kan ik nu oplossen dat de rechtste niet naar onder springt als de linkse minder dan 150px wordt?

Bedankt!

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<div style='float: left; width: 20%; min-width: 150px; vertical-align: top;'>
menu
</div>
<div style='float: left; width: 80%; vertical-align: top;'>
content
</div>
 
PHP hulp

PHP hulp

07/12/2021 01:16:08
 
Meneer Buis

Meneer Buis

19/07/2014 14:07:41
Quote Anchor link
Zoiets kan je doen met jQuery
 
Pipo Clown

Pipo Clown

19/07/2014 14:11:34
Quote Anchor link
Meneer Buis op 19/07/2014 14:07:41:
Zoiets kan je doen met jQuery


Hier ben ik wel heel erg benieuwd naar.

Kan je daar een voorbeeldje van geven met jquery ?
 
Goto Learn

Goto Learn

20/07/2014 01:37:53
Quote Anchor link
Dat hangt vanaf hoe breed je container of content is.
 
Ward van der Put
Moderator

Ward van der Put

20/07/2014 11:16:05
Quote Anchor link
Als de ene div een min-width: 150px heeft, heeft de andere div logischerwijs een max-width: calc(100% - 150px).

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
.links {
  width: 20%;
  min-width: 150px;
}

.rechts {
  width: 80%;
  max-width: calc(100% - 150px);
}


Je kunt het echter ook met JavaScript berekenen: trek gewoon de breedte van de linker div af van de totale breedte.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

20/07/2014 11:56:00
Quote Anchor link
@Ward: wordt jouw oplossing al door de belangrijkste browsers ondersteund?
 
Ward van der Put
Moderator

Ward van der Put

20/07/2014 12:07:51
 
Frank Nietbelangrijk

Frank Nietbelangrijk

20/07/2014 12:17:30
Quote Anchor link
Bedankt Ward. Hiernaar kijkende vraag ik me af wat ik er van moet vinden. Indien je er van uit wilt gaan dat gebruikers met hun tijd mee gaan en regelmatig hun software updaten dan is het ruim voldoende. Als je opa en oma ook mee wilt tellen met hun zwaar verouderde XP computer dan kom je met dit soort dingen toch weer bedrogen uit en lijkt een javascript oplossing me beter.
 
Ward van der Put
Moderator

Ward van der Put

20/07/2014 12:34:21
Quote Anchor link
Klopt Frank, alleen boek je nooit vooruitgang als je eeuwig en altijd de oudste browsers wilt blijven ondersteunen. Een soort kip-en-ei-probleem waarbij het ei nooit wordt uitgebroed ;-)

Ik zou bij dit soort ontwerpbeslissingen zelf even in de sitestatistieken duiken om te bepalen welke browsers voorlopig nog ondersteund moeten worden.
 
Shamrock Modelbouw

Shamrock Modelbouw

26/07/2014 11:56:40
Quote Anchor link
Bedankt, de calc functie heb ik vaker gebruikt maar inderdaad gebruiken velen nog oudere versies van IE en dit wordt tot en met 9 niet volledig ondersteund.

Uit mijn site statistieken blijkt dat van de IE gebruikers (21%), precies 50% IE9 of IE8 of IE7 gebruikt...

Ik denk dat de 11% maar moet updaten. Het enige probleem met IE is dat ik geen meerdere versies kan installeren om te controleren hoe het dan uitziet.
 
Machiel K

Machiel K

26/07/2014 19:33:51
Quote Anchor link
http://jsfiddle.net/t96Sv/ :)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
#links {
      background-color: #F2F2F2;
      min-width: 150px;
      max-width: 20%;
      float: left;
}

#rechts {
      background-color: #DDDDDD;
      display: block;
}


Zat eerst heel erg moeilijk te doen met dat #rechts, 80% breed moet zijn. Maar als je zegt dat #links maximaal 20% moet zijn, zal #rechts automatisch de rest (80%) opvullen.

Door #links een float: left; te geven en een width (in dit geval een min en max width, kan ook gewoon de normale width zijn), en #recht een display: block; te geven, zal #rechts de overige ruimte opvullen.

Hoogstwaarschijnlijk (weet het eigenlijk wel zeker) werkt dit in alle (veroudere) browsers.
 



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.