2 files changed, 34 insertions, 5 deletions
diff --git a/tests/static/progressbar.html b/tests/static/progressbar.html
index 6df5a7a5a..a83ada345 100644
--- a/tests/static/progressbar.html
+++ b/tests/static/progressbar.html
@@ -3,14 +3,43 @@
 <head>
 	<title>jQuery UI Progressbar Static Markup Test Page</title>
 	<link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
+	<style type="text/css">
+	h2 { margin:1.5em 0 .5em; }
+	</style>
 </head>
 <body>
 
 <h1>jQuery UI Progressbar Static Markup Test Page</h1>
 
+<h2>Flexible width:</h2>
+
 <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="13">
 	<div class="ui-progressbar-label">13% Completed</div>
-	<div class="ui-progressbar-value ui-state-default ui-corner-left" style="width: 13%;"><span class="ui-progressbar-label">13% Completed</span></div>
+	<div class="ui-progressbar-value ui-state-default ui-corner-left" style="width:13%;"><div class="ui-progressbar-label">13% Completed</div></div>
+</div>
+
+<br /><br/>
+
+<!-- users can set a left offset in px, %, ems, whatever to move the label along the axis -->
+
+<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55">
+	<div class="ui-progressbar-label" style="left:350px;">55% Completed</div>
+	<div class="ui-progressbar-value ui-state-default ui-corner-left" style="width:55%"><div class="ui-progressbar-label" style="left:350px;">55% Completed</div></div>
+</div>
+
+<br /><br/>
+
+<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55">
+	<div class="ui-progressbar-label" style="left:600px;">55% Completed</div>
+	<div class="ui-progressbar-value ui-state-default ui-corner-left" style="width:55%"><div class="ui-progressbar-label" style="left:600px;">55% Completed</div></div>
+</div>
+
+
+<h2>Fixed width (px):</h2>
+
+<div style="width:500px" class="ui-progressbar ui-progressbar-fixed ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78">
+	<div class="ui-progressbar-label">78% Completed</div>
+	<div class="ui-progressbar-value ui-state-default ui-corner-left" style="width:78%"><div class="ui-progressbar-label">78% Completed</div></div>
 </div>
 
 </body>
diff --git a/themes/base/ui.progressbar.css b/themes/base/ui.progressbar.css
index fad951413..94c8ac22e 100644
--- a/themes/base/ui.progressbar.css
+++ b/themes/base/ui.progressbar.css
@@ -1,6 +1,6 @@
 /* Progressbar
 ----------------------------------*/
-.ui-progressbar { position: relative; }
-.ui-progressbar-label {position: absolute; top: 0; left: 0; padding: .4em .5em; border: 0; background: none; }
-.ui-progressbar-value { position: relative; margin: -1px; padding: .4em .5em; overflow: hidden; font-weight: normal !important; white-space: nowrap; }
-.ui-progressbar-value .ui-progressbar-label { position: static; padding: 0; top: auto; left: auto; }
-\ No newline at end of file
+.ui-progressbar { position: relative; overflow:hidden; }
+.ui-progressbar, .ui-progressbar-value { height:1em; padding:.4em 0 .5em;  }
+.ui-progressbar-label { position: absolute; left:0; top: .3em; text-indent: .5em; border: 0; background: none; white-space: nowrap; }
+.ui-progressbar-value { position: absolute; top:0; width:100%; margin: -1px; overflow: hidden; font-weight: normal !important; white-space: nowrap; }
+\ No newline at end of file