Absolute vs Relative positioning

technoknow · Feb 13, 2005

Hi, a few questions.
I've read in the forum that absolute positioning should be avoided. Could someone explain why?
I've got 12 images that I'm aligning.
What would be the best way to do this?
Should I use DIV tags or P tags?
Should I use a container or wrapper to enclose elements, why?
Thanks for your time.
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.

johnwm · Feb 13, 2005

Try using a table

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts

CliveC · Feb 13, 2005

Absolute positioning seems ok at the beginning to align something at the very top:
eg: div.top {position:absolute; top:0px; left:0px} however elsewhere in the document it messes with the natural flow and could easily overlay other elements.

Relative positioning on the other hand is a way of saying where you would like something positioned relative to where it would have otherwise have been. These values may also be negative to partially overlap other elements. Example:
div.other {position:relative; top:-5px; left:30px}

To align objects you can use verical-align:top (or bottom or middle) to align elements relative to the top-most or bottom-most element.

Divs or Ps are not really necessary because you can use postion/abs/rel on the actual img tags.

Best way to understand it is to play around with it.

Perhaps someone else can address the balance of the question.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

Vragabond · Feb 13, 2005

Do it with floats. Just make sure you put a dummy element at the bottom to clear the float. But according to the explanation it sounds like a job for floated imgs.

oppcos · Feb 13, 2005

As CliveC mentioned, absolute positioning is not as good in many cases because it breaks the HTML flow. However, absolute position can be used within containers such as div tags to be relative to that div tag which can come in quite handy.

Don't use too much absolute positioning because the effects will start to get less and less logical and less cross-browser if you stack too many together. However, don't avoid them, per se, either, as they can be valuable in some instances where there is no other way.

If you go down the table path, it will be easier at first, less cross-browser capable, much more coding will be involved, harder to maintain, and later you will find you cannot achieve all the effects you may desire. Here's a liquid design that avoid's the use of tables. Note how wonderfully simple (and W3C valid) the HTML is. The style sheet is a little more complex, but not compared to tables, and a browser will cache the style sheet for all the pages on your site that use it, meaning you'll save a ton of bandwidth over a similar table design.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Add some other headers if you like, such as keywords, here. -->
<title>Liquid XHTML Without Tables</title>
<script type="text/javascript"></script>
<style type ="text/css" media="all">
 @import "default.css";
</style>
</head>

<body style="color: #DDDDDD; background-color: rgb(0, 0, 0);">

<div id="topbackground">
Top div.
</div>

<div id="maincontainer">
<div id="sidebar">
This is a sidebar.<br /><br /><br />Further down the sidebar.
</div>


<div id="content">Content div.<br /><br /><br />Further down the sidebar. Further down the sidebar.<br /><br /><br />Further down the sidebar. Further down the sidebar. Further down the sidebar.
</div>
</div> <! -- End of the maincontainer div -->

<div id="bottomdiv">
Bottom div.
</div>

</body>
</html>

CSS:

Code:

html {
     height: 100%;
     padding: 0;
     margin: 0;
     }
body {
      height: 100%;
      padding: 0;
      margin: 0;
      background: cyan;
      }

#topbackground {
	       position: absolute;
	       z-index: 2;
	       top: 0;
	       left: 0;
	       margin: 0em 0em 0em 0em;
	       padding: 0em 0em 0em 0em;
	       background: red;
	       width: 100%;
	       height: 230px;
	       }

#maincontainer {
	       z-index: 1;
	       height: 100%;
	       min-height: 100%;
	       top: 0;
	       left: 0;
	       margin: 0px 4% -100px 4%;
	       padding: 0;
	       background: blue;
	       }

body>#maincontainer {
	       height: auto;
	       }
#content {
	 margin: 0;
	 padding: 234px 8px 100px 8px;
	 background: transparent;
	 }
#sidebar {
	 margin: 0px 8px 4px 0px;
	 padding: 234px 4px 4px 4px;
	 float: left;
	 width: 110px;
	 height: 210px;
	 background: white;
	 color: black;
	 }
#bottomdiv {
	   position: relative;
	   width: 100%;
	   clear: both;
	   height: 100px;
	   margin: 0;
	   padding: 0;
	   background: green;
	   }

This design works accross IE, Firefox (Gecko), and Opera that I've tested, probably works with many more. You'll note there is never anything below the bottom div and scroll bars always work well. Also note that we were able to use % for sizes and that resizing the browser dynamically changes our webpage, which is what is meant by a liquid design.

Also, for browsers that don't support style sheets such as cell phones, it fails gracefully, providing the content in the correct order and with basic formatting. More use of <Hx> tags and <p> tags within the divs would improve this even more.

You'll note that with this design, some absolute positioning was necessary, but the whole design would be impossible without being careful about its use.

Hope that helps. I know it took me forever to get down to something relatively simplistic that worked. If you have questions about why I did something specific, let me know.

Vragabond · Feb 13, 2005

oppcos, I see topbackground is using absolute positioning although I fail to see why. Also, the answer has little to do with what the user is asking.

BillyRayPreachersSon · Feb 14, 2005

I've read in the forum that absolute positioning should be avoided. Could someone explain why?

There is no reason at all why you should avoid absolute positioning.

However, you should only use it when you need to - don't go putting it throughout your page just because you can ;o)

With your example, I would say that you would be better off avoiding it, although you could do the job with it.

Hope this helps,
Dan

ChrisHunt · Feb 14, 2005

There's nothing intrinsicly wrong with Absolute positioning. If you need to place page elements absolutely, then it's a powerful technique.

However, many browsers - older ones especially - struggle to implement absolute positioning correctly or at all. So if you have a site that uses lots of AP, it's layout could be messed up on old-but-not-dead browsers like, say, IE5. Floats are generally better supported - so if you can achieve your desired effect with floats it's probably the better alternative.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

oppcos · Feb 14, 2005

Vragabond, I was trying to hit upon two points in my post, though I probably didn't explain very well. First, I was trying to make an argument against using tables for positioning. One big reason people use tables for positioning is for a fluid design (using % widths and heights). Unfortunately, tables end up being less predictable in the long run and since the W3C strongly recommends only using tables for, well, tables, they make it less and less likely for that type of design to be compatible with future browsers (removal of height for cells, etc).

Then again, I was also trying to demonstrate an example of where absolute positioning makes perfect sense along with relative positioning. In a liquid design that mimics a fairly classic table effect (the code posted), the absolute positioning for the top section is necessary because we want it to break the natural design flow of the document.

If we didn't do that, then the main container wouldn't be able to have a 100% height. If you play around with the CSS a little, you'll see that that leads to problems either if you have too much content in the main body, or if you have too little content in the main body, which leads to losing the relational goodness.

Sorry if the post seemed off topic. I guess I didn't directly address lining up 12 images. The many good suggestions of using relative divs with the float css property seem the best answers. Of course, it all depends on how technoknow wants them aligned though. I can imagine several cases where absolute positioning may be his only option. Basically, if it looks clean and works across browsers you are targeting, go ahead and use it, is my advice.

technoknow · Feb 14, 2005

Thanks everyone for all of your insights.
I've been using absolute positioning with my images and have noticed that early versions of IE has a problem with them.
I think that I'll try using floated elements with relative positioning to see what kind of effects I can achieve.
Thanks for your time,
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Absolute vs Relative positioning

technoknow

Technical User

johnwm

Programmer

CliveC

Programmer

Vragabond

Programmer

oppcos

Programmer

Vragabond

Programmer

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

oppcos

Programmer

technoknow

Technical User

Similar threads

Part and Inventory Search

Sponsor