CSS Position problem

glenmac

02-21-2005, 04:36 PM

I'm trying to set up a page using CSS positioning. Not haveing much success.
I want to have the elements positioned the same in 800X600 as 1024X768 resolution. I've used percentages for the size of the elements and that works fine, but I was wondering if you can use percentages for relative positioning. Obviously using pixels won't work. I've tried. Does anyone know how to position my elements relative to the screen size, or if anyone can help me with my problem it would be much appreciated.
Here's my code to date;
<html>
<head><title> test</title>
<style>
#first{
width:20%;
height:15%;
background:red;
position:relative;
top:20px;
left:80px;
}
#second{
width:50%;
height:40%;
background:green;
position:relative;
top:-30px;
left:150px;
z-index:1;

}
#third{
width:20%;
height:15%;
background:blue;
position:relative;
left:530px;
top:-70px
}
html{
background:yellow;
}

</style>
</head>
<body scroll="auto">
<div id = "first"> first</div>
<div id = "second">second</div>
<div id = "third">third</div>
</body>

_Aerospace_Eng_

02-21-2005, 05:05 PM

sure u can use percentages for relative positioning but what exactly are you trying to do with your page, if you could clarify more maybe we can give a better solution

glenmac

02-21-2005, 05:31 PM

I'm trying to keep the same relative positioning of my elements no matter what resolution the page is viewed with. Hmm try to clarify. I want the page to look the same no matter what size it's viewed. All the elements should resize as the screen resizes and stay in the same position relative to each other. Sorry if that's not clear but I can't think of how else to explain it. If you look at the code in 1024 X 768 resolution and then at 800X 600 you will see what I mean, I hope!!

glenmac

02-21-2005, 05:43 PM

Got it Thanks for the help.
<html>
<head><title> test</title>
<style>
#first{
width:20%;
height:15%;
background:red;
position:relative;
top:10%;
left:20%;
}
#second{
width:50%;
height:40%;
background:green;
position:relative;
top:5%;
left:25%;
z-index:1;

}
#third{
width:20%;
height:15%;
background:blue;
position:relative;
left:60%;
top:0%
}
html{
background:yellow;
}

</style>
</head>
<body scroll="auto">
<div id = "first"> first</div>
<div id = "second">second</div>
<div id = "third">third</div>
</body>
Although I'm having trouble understanding how relative positioning works. Somewtimes it looks like it relative to where it should be relative to the preceding element, and sometimes it's relative to the page itself it seems. Oh well as long as it works.

rmedek

02-22-2005, 12:28 AM

Relative positioning puts the element relative to where it would have normally gone in the page flow. So if it would have normally been 10px below something, and you give it "position: relative; top: 2px" then it moves 12px below the element. It's all about the flow.

You can also combine relative/absolute positioning... let's say you have a containing element and an element inside of it. If you give the containing element "position: relative" and the inside element "position: absolute; bottom: 0" then the inside element is positioned absolutely at the bottom of its container.

Hope this helps,

glenmac

02-22-2005, 02:23 PM

Thanks for the clarification. I seem to be getting it. (http://lantzvillecomputers.ca/startpercent.htm)