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

Long time read, first time poster. :)

This is just amazing! You sir, are truly an amazing man! After I get over my shock, I might be able to figure out how to incorporate this where it could be used.
(06.05.2005, 22:19)

Paul Novitski:-
Good work, Stu. Here's your initial example rendered by a billion different browsers:
(08.05.2005, 18:35)

Thanks Paul, It looks like most combinations can cope with this. It was also interesting to see that most render the whole page correctly ;o)
(08.05.2005, 19:26)

Richard V:-
The sheer scope of this is inspiring. Being able to mix absolute and proportional sizes on a page is an incredible thought. Well done that man :)
(09.07.2005, 13:14)

Ralph Johns:-
Hi Stu,

This page displays in Firefox on a Mac and in IE 5.2.3 for Mac
Thinking of using this to get the to work in the Mac IE

Have found that the Border: -1px; in the Footer part causes the footer to disappear off the screen.

Having trouble getting the Mac IE to have the #content the same size as it appears in the Firefox (just below the Footer)

Where I am upto so far
(25.07.2005, 23:07)

I don't suppose anyone has come up with a method of doing percentage MINUS pixels?
(27.07.2005, 12:44)

Just to clear up what I mean. eg. My OUTER div has a height of 100%. I want my INNER div to have a height of 100% MINUS 15 pixels. The inner div would be 15 pixels shorter than the outer. Is there a "creative" way of doing this?

By the way, keep up the good work! :)
(27.07.2005, 12:52)

JB, could try a 15px top margin on the inner div.
(22.08.2005, 13:38)

Lee Meador:-
I adapted your method to do 1 line tall box that is X% one color and 100-X% another color with the text over the top telling what the percentage (X) would be. This makes it look like a little meter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" lang="en" xml:lang="en">
<title>half and half</title>
<style type="text/css">
.full {
background-color: #0000ff;
width: 300px;
height: 20px;
div.half {

height: 20px;
position: relative;
top: -20px;
width: 300px;
height: 20px;
<p>Half and Half</p>
<div class="full">
<div class="half" style="width:150px;">&nbsp;</div>
<div class="text">50% Match</div>
(26.08.2005, 16:35)

Lee Meador:-
Oh ... It works on IE 6 and Firefox 1.04.
(26.08.2005, 16:36)


You wanted feedback on how it looks on the Mac. The examples look the same in Fx 1.5 and Safari 2.0.3 on Mac OS X 10.4.4.

(15.01.2006, 12:49)

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)


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