Почему объявление класса CSS не работает с тегом <div>?

Я хочу создать чистую CSS-кодировку, в которой классы создаются для определенных атрибутов, например, класс ".20mleft" для применений 20px margin-left to html. Я хочу, чтобы div имел ширину 620 пикселей, а другой div имел ширину 220 пикселей. Оба divs размещены слева, а ширина div 620px должна иметь правую границу 20px. Оба div содержатся внутри класса контейнера div. Это коды.

HTML:

<div class="container">
  <div class="8cols fleft 20mright" style="border:1px #333 solid;"><p>This is the Main Content</p></div>
  <div class="3cols fleft" style="border:1px #333 solid;"><p>This is theSidebar</p></div>
</div>

Я использую 12 столбцов 960 сетки BTW.

CSS:

/** FLOAT OPTIONS **/
.fleft{float:left;}

/** BOX ELEMENTS **/
.container{width:940px; margin:0 auto;}
...
.3cols {width: 220px;}
...
.8cols {width: 620px;}

/** MARGIN OPTIONS **/
...
.20mright{margin-right:20px;}

Проблема. Свойства класса.fleft - это ТОЛЬКО ОДИН, работающий вообще. Свойства классов.8cols,.3cols и.20mright не применимы. Я проверил Firefox Inspector, и я не смог увидеть свойства, кроме объявления класса.fleft. Похоже, что ширина divs контролируется содержимым внутри него.

Для лучшего объяснения загрузите изображение ниже:

Пример изображения

PS Игнорируйте заголовок выше. Это мой проект, если вам интересно.

Пожалуйста, помогите мне как можно скорее. Большое спасибо.