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)?
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... JSFiddle for the code... SkyDrive folder for screenshots and wireframe
When I added widths to each of the elements as you specified I had no problems. Can you link to an example where the issue is occurring?