I have three divs in a row which will ultimately contain three, “widgets,” (calendar, YouTube playlist, and an audio podcast). When I apply a width of 30% to the first two DIVs everything works, but when I apply any width to the third DIV it causes the whole page to shift left, (absolute position left:0). Also, any padding added to the DIVs contained within .widgets seems to affect the page. Why are these DIVs, the third in particular, causing so much trouble? and how should I go about achieving the design I have on paper, (in the SkyDrive link)?
[JSFiddle for the results…](http://jsfiddle.net/xMNrW/4/embedded/result/ “JSFiddle for the results”)
[JSFiddle for the code…](http://jsfiddle.net/xMNrW/4/ “JSFiddle for the Code”)
[SkyDrive folder for screenshots and wireframe](http://sdrv.ms/13yCE82 “SkyDrive folder for screenshots of results”)
