Using only absolute positioning

**kurent** · 05-09-2008 06:06 AM

Some people advise against it, but I have yet to find any problems with it.

I made a simple HTML page to test this out and can't find where it would go wrong. The entire page is centered, but absolute offsets are inside a div tag that has position set to relative so anything inside it has offset from the centered part with 760px of width.

The only down side I can see is that you have to plan your site to the last detail before starting to position elements since any additions means all the offending elements left and top attributes must be changed to make room for the new element. But with absolute positioning your page is immune to different browsers, resolutions and window resizing. I think it's worth it.

Maybe a hint as to with what element used in a certain way a problem could arise?

Here is the page:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>Absolute Positioning Test</TITLE>
</HEAD>
	<BODY style="text-align: center;">

	<div style="position: relative; width: 760px; margin: 0 auto; text-align: left">
	
		<div style="position: absolute; left: 0px; top: 0px;">first selector:</div>
		<select name="dropdown1" style="position: absolute; left: 90px; top: 0px;">
			<option value="1">option1</option>
			<option value="2">option1</option>
			<option value="3">option1</option>
		</select>	
		
		<div style="position: absolute; left: 200px; top: 0px;">second selector:</div>
		<select name="dropdown2" style="position: relative; left: 310px; top: 0px;">
			<option value="1">option2</option>
			<option value="2">option2</option>
			<option value="3">option2</option>
		</select>
		
		<div style="position: absolute; left: 20px; top: 100px;">third selector:</div>
		<select name="dropdown3" style="position: absolute; left: 110px; top: 100px;">
			<option value="1">option3</option>
			<option value="2">option3</option>
			<option value="3">option3</option>
		</select>	
		

		<table style="position: absolute; left: 0px; top: 200px" border="1" width="760px">
			<tbody align="center">
				<tr>
					<td>1</td>
					<td>2</td>
				</tr>
				<tr>
					<td>3</td>
					<td>4</td>
				</tr>
				<tr>
					<td>5</td>
					<td>6</td>
				</tr>
			</tbody>
		</table>
		
	</div>


	</BODY>
</HTML>

**Centauri** · 05-09-2008 07:21 AM

Originally Posted by kurent

The only down side I can see is that you have to plan your site to the last detail before starting to position elements since any additions means all the offending elements left and top attributes must be changed to make room for the new element.

Not only a new element, but an expanding element, and herein lies the problem. If the user resizes their text causing one element to expand, any following elements cannot adjust to make room. If you make your site a fluid width to fill any screen resolution, then elements need to be able to expand and reshuffle themselves as the window size is varied. Absolute positioning can be quite a useful tool for many scenarios, but is far too inflexible for general positioning.

Originally Posted by kurent

I think it's worth it.

I don't.

Edit: just looked at your example - resize the text one step and the selector label text slides under and is partially hidden by the select boxes. Wouldn't happen if not absolutely positioned.......

**kurent** · 05-10-2008 06:42 AM

I don't know what you mean by "if the user resizes the text". How could he do that?

And yes, another problem with absolute is that the page must not have any width defined in percentages, everything must be fixed lenght. But then you just make it <1024 pixels in width since very few people use anything smaller then that and even they can just make the page smaller with the browser? Sure everything will be small, but serves them right for lagging behind!

So it would be better to use absolute positioning only in parts of the page that are enclosed into a div tag with relative positioning?

**Centauri** · 05-10-2008 06:48 AM

A user can resize the text easily. either via the browser's menu bar or Ctrl+ and Ctrl- for decent browsers, if they cannot read the text properly - this is always up to the user and it is our job to accommodate that.

I usually only use absolute positioning where I want something to overlap or to be locked relative to the bottom of a parent.

**drhowarddrfine** · 05-10-2008 07:41 AM

The one thing I have in the back of my mind about all this is that magazines aren't expandable yet the only people who complain about it are those who need a magnifying glass to read them, including me. Why are the accessibility people all up in arms over web sites accomodating such readers but not magazines and books? Just because a site can be adjusted doesn't mean they should automatically.

If one wants to make a pixel perfect site, what's wrong with that? So what if someone wants to zoom in and things break up? I'm sure the user can deal with that.

I'm not taking a stand. I'm just sayin'.

**kurent** · 05-10-2008 08:16 AM

Originally Posted by Centauri

A user can resize the text easily. either via the browser's menu bar or Ctrl+ and Ctrl- for decent browsers, if they cannot read the text properly - this is always up to the user and it is our job to accommodate that.

Ah now I understand, resizing only the fonts in the browser. I tried it and yes the text overlaps. But still, I'm not going to test my page in different browsers including versions and resolutions just so those few people will be able to increase the font size. Why not increase the size of the whole page then? Who increases only the text anyway? Weirdos!

Btw, try to increase the text size on your page you have in your signature, the same problem arises.

Come on people, I thought my idea of using only absolute positioning is going to get torn apart within minutes and send me crying.

**Centauri** · 05-10-2008 08:31 AM

Originally Posted by kurent

Why not increase the size of the whole page then? Who increases only the text anyway? Weirdos!

If I wanted to read small text easily, why the heck would I want pictures bigger, or have to scroll horizontally back and forth to read?? - "zooming" a page seems to be a silly idea

Originally Posted by kurent

Btw, try to increase the text size on your page you have in your signature, the same problem arises.

Huh ????

**kurent** · 05-10-2008 09:43 AM

On this page:
http://www.centauriaudio.com.au/web/index.html
which I presume you made, I tried the CTRL and + and some of the text dissapeared. If I zoom the whole page some of the text only overlaps.

**Centauri** · 05-10-2008 09:52 AM

So what are you using to look at this ? - I increase text size in FF, no text disappears or overlaps - I zoom in IE7, nothing overlaps....

**kurent** · 05-10-2008 10:30 AM

Opera and Firefox.

Thread: Using only absolute positioning

Thread Tools

Display

Using only absolute positioning

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions