Let’s say we have two divs side by side, each taking 50% of the width.
We want to use padding in order to style the content inside, but the padding enlarges the width of the divs and makes them appear one below the other. The solution is using “box-sizing: border-box;” in CSS to tell the browser that the 50% width is for the entire element including padding and borders.
|
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 |
<style> div { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 50%; height: 100px; padding: 10px; float: left; } .red { background-color: #f00; } .green { background-color: #0f0; } </style> </head> <body> <div class="red">oeuhtoeretoi uehro uherotiuerh oeuhtoeru heoui herot uhrtoeu htoe hrhrout heorth iuhoiuhoiuh oiuhoiuho</div> <div class="green">ofire rtuh eoru eroiuh eoiuh eoruwh oiu 0y387 edfug oge gw7ge8gwg 0w7g 0w8ef wehr wer8 wefiu dofug dofyg dfyg dofyg dfuydg foudf dog</div> </body> </html> |