Sign in to follow this  
kag1

[web] Relative Positioning - Unreliable

Recommended Posts

Hi, I've made a user control in asp.net, which actually consists of a
tag with a picture in it, and some other controls scattered around this picture (the placement of the controls is very important). The only way I could get it to show up right was use relative positioning for all the controls in this div area..i spent lots of time getting it just right, just to find out that when I add more than one of these controls..everything shifts and moves (into the wrong spots).. How can make a thing stay where I want it...but dynamically? (meaning probably without absolute positioning?

Share this post


Link to post
Share on other sites
Try using absolute percentages.

div#1 {
position:absolute;
margin-left:0%;
width:33%;
}

div#2 {
position:absolute;
margin-left:33%;
width:33%;
}

etc.


Careful going down that road, though, because the more you use percentages, the less you can use pixels. Especially in height measurement, the two aren't interchangeable.

Share this post


Link to post
Share on other sites
I think the reason this is happening is that relative positioning will position an element relative to the last object that was placed. Absolute positioning, on the other hand, positions an element relative to its containing block. You could define a div that holds all the controls, then place each of the controls absolutely within this block. Then, to move it, you'd just move the position of the containing div. Would this do what you want?

Share this post


Link to post
Share on other sites
Relative positioning works like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>

<h1>Header</h1>

<h2>Section 1</h2>

<div style="position: relative; margin-left: 100px; width: 300px; height: 300px; border: solid black 1px;">
<span style="position: absolute; top: 0; left: 0;">I'm on the top left of the parent div</span>
<span style="position: absolute; right: 0; bottom: 0;">I'm on the bottom right of the parent div</span>
</div>

<h2>Section 2</h2>
</body>
</html>




Of course Internet Explorer has some terrible problems with relative positioning. (All modern browsers can handle it without a problem, so you may want to test first with them.) If the IE bugs crop up, you can make an IE-only hack to fix it. Usually it has to do with the left margin being out of whack, so you can give it a negative one to correct it. Depending on your layout, you may not experience it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this