CSS rage. CSS coolness.

Apparently, you cannot use a digit in an ID or CLASS name.

p#1st
is not ok.

p#first
is ok.

ok then. I just didn’t know and lost 90min figuring it out.

But in the same time I have learned that you can do simple maths directly in CSS, for all your formatting nightmares for responsiveness:

width: calc(33% -[your desired padding for example:] 50px);

Will automatically make the DIVs occupy a third of the page whatever the resolution and have the padding of your choice respected at all times.

Well…. Kinda! Naturally computers don’t understand that if you input 33%, you don’t want the result to sometimes be 33.001%, which will break the layout.
So use 49% for half, 32% for a third, 24% for a quarter… But well, that is a very neat CSS functionality that is largely supported in all modern browser, even Internet Explorer 9 and up.

CSS rage. CSS coolness.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s