0

I want to create a clean CSS coding where classes are created for specific attributes, e.g. ".20mleft" class for a 20px margin-left to html elements applied. I want a div to have a 620px width and the other div having 220px width. Both divs are floated left and the 620px width div should have a 20px margin on its right. Both divs are contained inside a container class div. These are the codes.

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>

I am using a 12 column 960 grid 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;}

Problem: The properties of .fleft class is the ONLY ONE working at all. The properties of the .8cols, .3cols and .20mright classes failed to apply. I checked Firefox's Inspector and I couldn't see the properties, except the.fleft class declaration. It seems like the divs' widths are controlled by the contents inside it.

For better explanation, download the picture below:

Sample Picture

P.S. Ignore the header above. This is my project in case you are wondering.

Please help me ASAP. Thanks a lot.

Migs M.
  • 11
  • 1
  • 3

3 Answers3

5

CSS syntax requires class names used as identifiers to start with a letter, underscore, or dash.

You can, however, use escapes to get around this issue. For example, you can escape "8cols" as:

.\38 cols { width: 620px; }

in the CSS file. Personally that seems like something that'd get ugly pretty quick. Here is a quote tool for CSS.

It's not quite correct to say that special characters are "invalid" in class names and "id" values; they're not, but they have to be treated specially. The rules are for identifiers, but neither class names nor "id" values need to be identifiers.

Pointy
  • 405,095
  • 59
  • 585
  • 614
2

CSS class names beginning with number character are invalid. Please read What characters are valid in CSS class selectors?

Community
  • 1
  • 1
RaviH
  • 3,544
  • 2
  • 15
  • 14
2

Here the best answer related

A Class name must begin with an underscore (_), a dash (-), or a letter(a–z), and must be at least 2 chars length.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Community
  • 1
  • 1
StarsSky
  • 6,721
  • 6
  • 38
  • 63