I've never had that problem with Safari despite using inherited widths since day 1.
For instance, you put a div with no width into a div of 300px, and somehow the inner div will pop out to 400px or more.
The width 'inherits' just fine, defaulting to the '100% of the parent element' just as it should.
Your layout does appear to be going wrong in Safari though, but I doubt it's Safari inheritance that's causing the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
border: 1px solid #333;
border: 1px dashed #999;
<div id="parent">parent. width: 300px;
<div id="child">child. no width declared.
I'll take a glimpse at your code later, though I imagine it will be some element within the 'article' divs forcing them to become wider than their 'right' parent div.
Check padding and margins and also that you haven't explicitly declared width: 100%; *and* a margin (and/or padding) together for the same block element.
Not sure if the array of hacks you have in your css are helping keep things simple.