Settingthevalueofbox-sizingtoborder-boxcreatesalittlebitofmagic.Now,
thevaluesofwidthandheightwillbeappliedtotheouterborderedgeinsteadof
thecontentarea.Bordersandpaddingaredrawninsidetheelementbox,matching
theoldInternetExplorer5.5behavior.Let’slookatanexamplethatmixespercentage
widthsandpxunitsforpaddingandborders:
<div class="wrapper">
<article>
<h2>This is a headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ... </p>
</article>
<aside>
<h2>This is a secondary headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ... </p>
</aside>
</div>BothourarticleandasideelementshavethefollowingCSSapplied,whichgives
usthelayoutshowninFigure4.5wherethefirstelementhasawidthof60%while
thesecondhasawidthof40%:
article, aside {
background: #FFEB3B;
border: 10px solid #9C27B0;
float: left;
padding: 10px;
}
article {
width: 60%;
}Complex Layouts 133