CODEWITHSUNDEEP
htmlcss
user2645586
user2645586

Reputation: 71

Span class within divs to separate 2 words html

Hi I'm trying to separate 2 words from each other by using a span but it does not seem to work. Not sure if it's because it's within a div. 

.500{
display:inline-block;
margin-left:300px;
}

<div id="search"> 
<h2>
Search</h2>
<br>

0  <span class="500"> 500 </span>
<br />
</div>

Upvotes: 0

Views: 2174

Answers (5)

Elen
Elen

Reputation: 2343

Start your class name with a letter: http://jsfiddle.net/5Y2Zn/

.l500{
display:inline-block;
margin-left:300px;
}

<div id="search"> 
<h2>
Search</h2>
<br>

0  <span class="l500"> 500 </span>
<br />
</div>

Upvotes: 5

indofraiser
indofraiser

Reputation: 1024

Do you just want a space between 0 and 500?

Put &nbsp;

Upvotes: 0

brbcoding
brbcoding

Reputation: 13596

From the documentation here

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

If for some crazy reason you need to do it -- you could (not recommended) access it like this:

span[class="500"] {
    display:inline-block;
    margin-left:300px;
}

DEMO

Upvotes: 3

Harry
Harry

Reputation: 89780

Class Names should start with a letter. 

.span_500{
    display:inline-block;
    margin-left:300px;
}

<div id="search"> 
<h2>
Search</h2>
<br>

0  <span class="span_500"> 500 </span>
<br />
</div>

Upvotes: 3

Kelu Thatsall
Kelu Thatsall

Reputation: 2541

You cannot use class names which are only numerical. The class name should start with a letter.

EDIT: Oh I see Elen commented the same way. Please try out her fiddle and check out how to correct your code.

.l500 {
  display:inline-block;
  margin-left:300px;
}

Upvotes: 4

Related Questions