Div Positioning

K.Prasanna Kumar · Aug 25, 2003

Hi

I would like to have 2 Divs one on the other.
The purpose is to show a progress bar and percentage completed
on top of the progress bar like

-------------------
| 30 % |
-------------------

But I could not relatively position the two DIVs
inside a Table.If i relatively position the DIVs, two DIVs
are shown one below the other.If i absolutely position the DIVs,
on resizing two DIVs are changing their positions. Is there any way to
relatively position the DIVs ? I am working on IE 6 and NN 7.

Regards
Prasanna.

Lasse Reichstein Nielsen · Aug 25, 2003

-------------------
| 30 % |
-------------------

But I could not relatively position the two DIVs
inside a Table.If i relatively position the DIVs, two DIVs
are shown one below the other.If i absolutely position the DIVs,
on resizing two DIVs are changing their positions. Is there any way to
relatively position the DIVs ? I am working on IE 6 and NN 7.

Try this:
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Progress Bar Test</title>
<style type="text/css">
.progressBar {
position:relative;
width:100px;
height:1.5em;
text-align: center;
background:white;
color:black;
border:1px solid black;
}
.progressBar .progress {
position:absolute;
top:0px;
left:0px;
width:100px;
height:1.5em;
background:blue;
color:white;
overflow:hidden;
clip: rect(0px,0px,1.5em,0px);
}
</style>
</head>
<body>
<div class="progressBar"><span id="content1">0%</span>
<div class="progress" id="progressID"><span id="content2">0%</span>
</div>
</div>
<script type="text/javascript">
function setProgress(id,pct,cnt1,cnt2) {
document.getElementById(id).style.clip="rect(0,"+pct+"px,1.5em,0px)";
document.getElementById(cnt1).firstChild.nodeValue = pct+"%";
document.getElementById(cnt2).firstChild.nodeValue = pct+"%";
}

var pct = 0;
function progress() {
pct++;
setProgress("progressID",pct,"content1","content2");
if (pct<100) setTimeout(progress,100);
}
progress();
</script>
</body>
</html>
---
It fails in Opera, because their implementation of the CSS clip
property only clips the content, not the background. I'll ask them if
that is correct behavior.

/L

K.Prasanna Kumar · Aug 26, 2003

Great! The code works fine with both in IE6 and NN7.!

Lasse Reichstein Nielsen · Aug 26, 2003

Great! The code works fine with both in IE6 and NN7.!

Sadly it doesn't work in Opera 7. Until I find out whether that
is deliberate, I have made a different version using the width
property:
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Progress Bar Test</title>
<style type="text/css">
.progressBar {
position:relative;
width:100px;
height:1.5em;
text-align: center;
background:white;
color:black;
border:1px solid black;
}
.progressBar .progress {
position:absolute;
top:0px;
left:0px;
width:100px;
height:1.5em;
overflow:hidden;
}
.pcontent {
background:blue;
width:100px;
height:1.5em;
color:white;}
</style>
</head>
<body>
<div class="progressBar"><span id="content1">0%</span>
<div class="progress" id="progressID"><div
class="pcontent" id="content2">0%</div>
</div></div>
<script type="text/javascript">
function setProgress(id,pct,cnt1,cnt2) {
document.getElementById(id).style.width = pct+"px";
document.getElementById(cnt1).firstChild.nodeValue = pct+"%";
document.getElementById(cnt2).firstChild.nodeValue = pct+"%";
}

var pct = 0;
function progress() {
pct++;
setProgress("progressID",pct,"content1","content2");
if (pct<100) setTimeout(progress,100);
}
progress();
</script>
</body>
</html>

Lasse Reichstein Nielsen · Aug 27, 2003

Now you are using height 1.5em for both the divs. Can u pl detail me what is
em? is it 150 % ?

1.5 em is 150% of the font size.

I usually give my lengths in em's, because I am firmly against
changing the users preferred font size, and any fixed size design
will blow up for people with larger or smaller fonts than expected.

I want to have a progress bar of height 15px. But if i change height to 15px.
The outer DIV is not showing the correct Height.

That is probably because the outer div contains text, so it will not accept
being smaller than one line of text.

Can u please give the height in 15px.?

You can try adding "line-height:15px;font-size:15px;" to the
..progressBar CSS rule. That should keep the text from pushing the
boundaries of the div.

/L

K.Prasanna Kumar · Aug 27, 2003

Hey Great. Works fine.
Are u a Stylesheet Genius

?

[where u get these CSS properties
for all objects ? ;-) ]

Div placement	2	Jul 17, 2023
Positioning CSS components	1	Nov 16, 2023
Clickable Div Block	1	Oct 13, 2023
JS querySelector addEventListenerer index getElementsByClassName parent div only	1	Jan 25, 2023
Javascript scrollbar not working in hidden <DIV>s	0	Jun 22, 2009
Overlapping elements don't quite match	6	Apr 15, 2009
Getting onclick to fire thru absolutely positioned iframe on div	0	Jun 2, 2006
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions	0	Oct 27, 2023

Div Positioning

K.Prasanna Kumar

Lasse Reichstein Nielsen

K.Prasanna Kumar

Lasse Reichstein Nielsen

Lasse Reichstein Nielsen

K.Prasanna Kumar

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads