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

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)

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


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