CSS Master

aside {

width: 40%;

}

Figure 4.5. Elements with box-sizing: content-box

Bydefault,bothasideandarticlehaveabox-sizingvalueofcontent-box.The

border-widthandpaddingvaluesadd 40 pixelstothewidthofeachelement,which

throwsoffthe60%/40%splitconsiderably.Nowlet’saddbox-sizing: border-

boxtothearticleandasideelements:

article, aside {

box-sizing: border-box;

}

YoucanseethechangeinFigure4.6:theelementshavethesamewidth,butthe

box-sizing: border-boxmeansthatthewidthincludestheborderandpadding.

Becausethewidthpropertyappliestotheborderedgeinsteadofthecontentarea,

ourelementsnowfitsidebyside.

134 CSS Master