Probleem css opmaak padding
Ik ben bezig met een responsive website en heb dan een probleem met wat ik wil qua opmaak.
Ik maak website met een linker deel en rechter deel en dan links 25% en 75%. Alleen als ik een padding bij de 25% wil doen van 20px; dan komt het rechterdeel er onder te staan. Hoe kan ik dit oplossen?
Ik maak website met een linker deel en rechter deel en dan links 25% en 75%. Alleen als ik een padding bij de 25% wil doen van 20px; dan komt het rechterdeel er onder te staan. Hoe kan ik dit oplossen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="grid" style="width: 100%; max-width: 960px; margin: 0 auto;">
<div class="left" style="width: 25%; float: left; background-color: #ff0000; padding-right: 20px;">
links
</div>
<div class="right" style="width: 75%; float: right; background-color: #096;">
rechts
</div>
</div>
<div class="left" style="width: 25%; float: left; background-color: #ff0000; padding-right: 20px;">
links
</div>
<div class="right" style="width: 75%; float: right; background-color: #096;">
rechts
</div>
</div>
Als je begrijpt wat er gebeurt is dat natuurlijk logisch. Je hebt een div van 100% dus elke border,padding of margin is teveel. En als het niet naast elkaar past komt het onder elkaar.
Wat je kan doen in een dubbele div gebruiken.
Zo heb je nog steeds een breedte van 100%, maar daarbinnen kun je doen wat je wilt.
Wel een tip: Je kunt beter je CSS apart neerzetten i.p.v. inline styling.
Wat je kan doen in een dubbele div gebruiken.
Code (php)
1
2
3
2
3
<div class="left" style="width: 25%; float: left; background-color: #ff0000;">
<div style=" padding-right: 20px;">links</div>
</div>
<div style=" padding-right: 20px;">links</div>
</div>
Zo heb je nog steeds een breedte van 100%, maar daarbinnen kun je doen wat je wilt.
Wel een tip: Je kunt beter je CSS apart neerzetten i.p.v. inline styling.