homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Using both id and class in a div tag

 8:34 pm on Feb 9, 2006 (gmt 0)

On my page I frequently use empty div-elements for spaces.

Normally, I would just make a class and specify the styles.
But now, I'd like to keep all the styles inside a single "id" in my CSS file, except the height and make a few "classes" named 10, 15, 25 ect. that contains the height.

So, my CSS file would look something like this:

#space { font-size: 0px;width: 230px;padding: 0px 1px;margin: auto; }
.05 { height: 5px; }
.10 { height: 10px; }
.15 { height: 15px; }
.25 { height: 25px; }

And then add a div element like this:

<div id="space" class="15"></div>

At first, I was positive this would work out just fine, but it doesn't. Still, I've seen this done in other people's html code, that is, using BOTH id's and classes in a single tag.

Is there something that I'm just doing wrong or is this not possible?


Clinton Labombard

 8:52 pm on Feb 9, 2006 (gmt 0)

First, your class names need to start with a letter. Second, you can specify more than one class for an element:

.space { font-size: 0px;width: 230px;padding: 0px 1px;margin: auto; }
.five { height: 5px; }
.ten { height: 10px; }
.fifteen { height: 15px; }
.twenty_five { height: 25px; }

<div class="space fifteen"></div>


 8:52 pm on Feb 9, 2006 (gmt 0)

Try by putting a letter before your numbers:

.p01 {...}

I think Firefox doesn't like it when your classes start with a number.


 8:57 pm on Feb 9, 2006 (gmt 0)

Hi atlibj,

AFAIK, class names may not start with a number. Try giving them names that start with an alpha character.

Also, you may want to reconsider the naming, use semantics instead of describing the property in the name.

You have a class called, say, .p15 and assign it 15px height. What if later you find that the elements formatted with this class look much better with 20px height? Ok, you will change the value of the class .p15 in the CSS but you'll get really confused as you go along.

It would be much better to semantically name the class, i.e. create a name that describes which element it formats, instead of what the format is.



looks like I only re-hashed the previous two answers, but I started writing when there were no replies yet. Then I get this phone call that goes on forever .... :)


 9:24 pm on Feb 9, 2006 (gmt 0)

Thank you so much guys!

Yes, I simply forgot about that you can't start a class with a number. Changing this of course solved my problem :)

Also a really good point Teylyn mentioned about the semantics and the hard work I might be facing if I like to change the heights sometimes later.

In this case I think I'm gonna do alright later on, but this is really something I will consider next time.

Thanks again so much :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved