HTML CSS Multiple Classes Width/Height/Size not set

Question

I am trying to create a div, that is created by adding multiple classes. For a particulair reason, the width, height and size will not set. Instead they are the auto-size. When I add everything to one class, the size and such work, but as stated earlier when seperated, they will not do anything.

How I created the multiclass div (tried shuffeling the classes aswell)

<div class="box pos1 1x1">
<p class="verdana"> ... </p>
</div>

Inside the CSS file:

.pos1{
    display: inline; float:left;
}

.1x1 {
    width:13.5vw;
    height:13.5vw;
}

.1x2 {
    width:13.5vw;
    height:17.5vw;
}

.2x2 {
    width:17.5vw;
    height:17.5vw;
}

div.box{
    background-color:#000000; color: white;
    margin-left:0.25vw; margin-top:0px; margin-right:0.25vw; margin-bottom:0px;
    border: white solid 2px;  
}

Also creating one big class is not an option.

Thank you.

Mmm, seems like that sovled the whole thing. Thank you very much! — Coco, Feb 22 '16 at 14:45
@Paulie_D - You can if you escape it properly https://jsfiddle.net/j08691/gc5j590z/. http://stackoverflow.com/a/6732899/616443. https://mothereff.in/css-escapes — j08691, Feb 22 '16 at 14:47
@j08691 Well yes, but I think that's a little advanced here. Start 'em slow. :) — Paulie_D, Feb 22 '16 at 14:57

Sebastian Brosch · Accepted Answer · 2016-02-22T14:53:51.143

Class names starting with numbers are not valid! Your class name have to start with _, - or a letter (a-z)!

The pattern to validate a class name: -?[_a-zA-Z]+[_a-zA-Z0-9-]*

https://www.w3.org/TR/CSS21/grammar.html#scanner

See the following solution:

.pos1{
  display:inline; 
  float:left;
}
.size1x1 {
  width:13.5vw;
  height:13.5vw;
}
.size1x2 {
  width:13.5vw;
  height:17.5vw;
}
.size2x2 {
  width:17.5vw;
  height:17.5vw;
}
div.box{
  background-color:#000;
  color:#fff;
  margin:0 0.25vw;
  border:2px solid #fff;  
}

<div class="box pos1 size1x1">
  <p class="verdana"> ... </p>
</div>

score 0 · Answer 2 · answered Feb 22 '16 at 14:43

0

As other mentioned class name cannot start with numbers, and in pos1 you make the div to display as inline. Inline element does not have height, should use inline-block.

answered Feb 22 '16 at 14:43

Emil Borconi

3,326
2
24
40

HTML CSS Multiple Classes Width/Height/Size not set

2 Answers2