Sorry if this is a basic question but here is my code: http://jsfiddle.net/s7wdkxun/
I can't understand why this isn't working with the percentage widths, instead it stays as fixed pixels.
<div style="width: 100%">
<input class="1">
<input class="2">
<input class="3">
</div>
CSS
* {
margin: 0;
padding: 0
}
.1 {
width: 30%;
margin-right: 10%
}
.2 {
width: 30%;
margin-right: 10%
}
.3 {
width: 20%
}
Where am I going wrong?
CSS classes cannot start with a number, per W3 spec. Change it's name and it should work.
not have to do with numbers
Do NOT start an SELECTOR with a number!
use:
<input class="one">
<input class="two">
<input class="tree">
As explained here Which characters are valid in CSS class names/selectors?:
...a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must be a letter or underscore, and the name must be at least 2 characters long.
So if you update your class names to meet this criteria, for example change to one, two, and three it will work properly. JS Fiddle Demo
