2 divs naast elkaar met min-width
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)
1
2
3
4
5
6
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>
menu
</div>
<div style='float: left; width: 80%; vertical-align: top;'>
content
</div>
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 ?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.links {
width: 20%;
min-width: 150px;
}
.rechts {
width: 80%;
max-width: calc(100% - 150px);
}
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.
Ik zou bij dit soort ontwerpbeslissingen zelf even in de sitestatistieken duiken om te bepalen welke browsers voorlopig nog ondersteund moeten worden.
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
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;
}
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.