Mobile Friendly Website


Doing it with style

Percentage PLUS pixels COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Thanks for the feedback MEMark.
(15.01.2006, 14:57)

it works great on all of the newer mac browsers. i wouldn't bother with ie mac, nobody uses it anyway.

very very cool!
(04.04.2006, 17:04)

Chris Klaus:-
Hi Stu,

It looks like there's a problem in IE 7 beta 2. Regardless this is still a great concept!
(20.04.2006, 20:35)

Wow! Works in ie 5.2 for mac. Despite this browser being written off as crappola, people still use this more than developers want to admit.
(23.04.2006, 23:40)

Nice going with those boxes. Although i haven't had the opportunity to use any of these, i have tested them on the mac in the following browsers:
Opera 8.51,
firefox 1.07 + 1,5
Safari 2.0.4
Mozilla 1.7.8
Internet Explorer 5.2

And all of them reads it correctly as far as I know.

I did see that previous posters have tested some of the browsers, but then you could read this as a confirmation to those :)
(05.09.2006, 15:09)

First thx for this.
I have a question in the idea :
Is there a way to indicate an absolute position to a div with a percentage AND a pixel value.
For exemple, i want my div to appear like that :

div {
position: absolute;
left: 50%; /* But I need to translate it 20px more on the left */

Any idea ?
(27.07.2009, 17:29)

try margin-left:-20px;
(27.07.2009, 17:53)

With css3 you can use the calc function

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
(14.05.2013, 02:20)

CSS can't be copyrighted and posting a false copyright claim is punishable with up to $2500.

Please remove it.
(23.05.2014, 15:27)

This demo is 8 years old and I am not claiming the the CSS is copyrighted. I am just saying that the web page that my demonstration is on is copyright cssplay.
(23.05.2014, 15:54)

10 of 21 comments (part 1). [ » ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page