css position setup

Question

Im trying to setup a centrally aligned div, both vertically and horizontally, im trying to do it by setting the width and height of the div, and then positioning it fixed center and offsetting the margins by 50%.

This is the css im using

#404-wrapper    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-200px;}
#404-wrapper a  {font-size:14px; line-height:120%;}

ive also made a jsfiddle here - http://jsfiddle.net/wnGL3/

but i cant see why it isnt working, any ideas ?

IDs can't start with a number I don't think. More info here: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — MDEV, Dec 27 '12 at 15:23

score 3 · Accepted Answer · answered Dec 27 '12 at 15:22

3

rename your markup and css without the number in the front

#wrapper    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-      top:-100px; margin-left:-200px;}
#wrapper a  {font-size:14px; line-height:120%;}

answered Dec 27 '12 at 15:22

t q

4,593
8
56
91

ahh i never knew that so you cant have numbers in a css class/id name or is it just numbers infront ? – sam Dec 27 '12 at 15:23
thanks, i would have played around with that all day, and still never got it ! – sam Dec 27 '12 at 15:24

Wesley Murch · Answer 2 · 2012-12-27T15:34:40.120

2

id attributes can legally start with a number in HTML5, but you'll still have a problem with it in CSS.

If you can't change the id, you can use an attribute selector:

[id="404-wrapper"] {}

Demo: http://jsfiddle.net/wnGL3/10/

Just for fun, there's another way to do it using unicode escape codes:

#\00003404-wrapper {}

\000034 represents the number 4. Demo: http://jsfiddle.net/wnGL3/11/

edited Dec 27 '12 at 15:34

answered Dec 27 '12 at 15:25

Wesley Murch

101,186
37
194
228

score 1 · Answer 3 · answered Dec 27 '12 at 15:25

ID's cannot start with numbers unfortunately.

From the W3C spec on Id's

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

http://www.w3.org/TR/html4/types.html#type-name In this article it described what the 'name' for the ID can be.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).

Change the ID to wrapper-404 and it works.

#wrapper-404    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-200px;}

#wrapper-404 a    {font-size:14px; line-height:120%;}

http://jsfiddle.net/rlemon/wnGL3/3/

score 0 · Answer 4 · answered Dec 27 '12 at 15:21

0

Use position as relative instead of fixed. It should work.

answered Dec 27 '12 at 15:21

GautamJeyaraman

545
2
11

score 0 · Answer 5 · answered Dec 27 '12 at 15:26

0

ID's Cannot start with a number in css.

But you can fix it with change

#404-wrapper

to

[id='404-wrapper']

Here is an working example.

answered Dec 27 '12 at 15:26

Mateusz Rogulski

7,357
7
44
62

css position setup

5 Answers5