473,605 Members | 2,590 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

What's so terrible about absolute positioning?

Hello,

Having been a light reader of this ng for a few months now (after
several years absence), I have noticed that absolute positioning seems
to be considered a Very Bad Thing around here. Generally, when someone
posts a question about a design that uses it, they are told not to.

Now, in my ignorance, I don't see what's wrong with it, when used
sensibly. Let me say straight off that I am *not* talking about trying
to produce pixel-perfect designs, that's not what the web is for
(AFAIK).

As an example of what I mean, suppose you wanted a three-column layout,
with the left and right columns fixed width (in em or %), and the middle
column fluid. It looks like you could do this really easily with
absolute positioning. You could fix the position of the left and right
columns, and give the middle one margins to suit. Seems very robust and
simple to me.

Now, given that I'm *no* expert in this, would anyone care to comment on
this? There must be some reason why people don't like absolute
positioning, unless the negative reaction is against people trying to do
pixel-perfect design. Comments?

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)
Mar 16 '06 #1
4 2100
Alan Silver <al*********@no spam.thanx.inva lid> wrote:
Having been a light reader of this ng for a few months now (after
several years absence), I have noticed that absolute positioning seems
to be considered a Very Bad Thing around here. Generally, when someone
posts a question about a design that uses it, they are told not to.

Now, in my ignorance, I don't see what's wrong with it, when used
sensibly.
Correct, but if you look at the examples that are criticized here it is
not used sensibly.
Let me say straight off that I am *not* talking about trying
to produce pixel-perfect designs, that's not what the web is for
(AFAIK).
Many don't realize that, to them absolute positioning is a way to
finally get rid of that awkward "doesn't always look the same" thing.
This often results in people absolutely positioning every blooming
element.
As an example of what I mean, suppose you wanted a three-column layout,
with the left and right columns fixed width (in em or %), and the middle
column fluid. It looks like you could do this really easily with
absolute positioning. You could fix the position of the left and right
columns, and give the middle one margins to suit. Seems very robust and
simple to me.


Yes that's fine in principle, although 3 columns is a lot (typically
won't scale well to narrower viewports).

--
Spartanicus
Mar 16 '06 #2
In article
<vv************ *************** *****@news.spar tanicus.utvinte rnet.ie>,
Spartanicus <in*****@invali d.invalid> writes
<snip>
As an example of what I mean, suppose you wanted a three-column layout,
with the left and right columns fixed width (in em or %), and the middle
column fluid. It looks like you could do this really easily with
absolute positioning. You could fix the position of the left and right
columns, and give the middle one margins to suit. Seems very robust and
simple to me.


Yes that's fine in principle, although 3 columns is a lot (typically
won't scale well to narrower viewports).


OK, that's a separate point. I was using this merely as an example of
where absolute positioning appeared to offer a significant benefit.

Thanks for the reply, you've set my mind at ease!!

--
Alan Silver
(anything added below this line is nothing to do with me)
Mar 16 '06 #3
Alan Silver wrote :
Hello,

Having been a light reader of this ng for a few months now (after
several years absence), I have noticed that absolute positioning seems
to be considered a Very Bad Thing around here. Generally, when someone
posts a question about a design that uses it, they are told not to.

Now, in my ignorance, I don't see what's wrong with it, when used
sensibly. Let me say straight off that I am *not* talking about trying
to produce pixel-perfect designs, that's not what the web is for (AFAIK).

As an example of what I mean, suppose you wanted a three-column layout,
with the left and right columns fixed width (in em or %), and the middle
column fluid. It looks like you could do this really easily with
absolute positioning. You could fix the position of the left and right
columns, and give the middle one margins to suit. Seems very robust and
simple to me.

Now, given that I'm *no* expert in this, would anyone care to comment on
this?

1- MSIE 6 has **lots** of implementation bugs on absolute positioning,
on containing block calculations.
2- Abs. pos. content is extraordinary difficult to select with mouse and
keyboard in MSIE 6
3- Abs. pos. blocks are taken out of normal flow; accessibility and
usability of a website often underestimate this. Non-abs. pos. blocks
will therefore behave quite differently from abs. pos. blocks.

Gérard
--
remove blah to email me
Mar 16 '06 #4
On Thu, 16 Mar 2006 16:30:21 +0000, Alan Silver
<al*********@no spam.thanx.inva lid> wrote:
I have noticed that absolute positioning seems
to be considered a Very Bad Thing around here.


Second problem - absolute positioning only makes sense on an absolute
canvas. If you're aiming for a fluid design on varying windows, then
absolute positioning makes this hard. It's like table-based layout - an
easy way to control grid-based layouts, but we don't _want_ grid-based
layouts.

Main problem though is that absolute jumps out of the page flow and
stops a lot of UI stuff working easily (browser dependent). It's OK for
a floating toolbar or such, but not good for the main body text column.
Also doing it right isn't exactly difficult ! It's not easy to work it
out, but it's very easy to find a well-implemented example from a good
tutorial site and use that.
Mar 17 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
2469
by: Harlan Messinger | last post by:
What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block." Please take a look at http://gavelcade.com/abspos.html and help me understand why my nested, absolutely positioned divs are being positioned with respect to the page rather...
7
6292
by: Griff Miller | last post by:
Please see http://home.houston.rr.com/gmiller15/css/vertprob.html . In mozilla 1.6/1.7 it looks the way I want it, with a thin separation between the two boxes. In IE6, the two boxes touch, which is not what I want. Is there a way to get IE6 to do it the mozilla way? Thanks! Griff
4
4556
by: mike eli | last post by:
Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so the the element should have a width = parentWidth - 10; This is the desired behaviour, but it won't work. I still have to specify a width or the element has a width of 0. Setting the width to '100%' doesn't give me the desired effect; it takes...
1
1881
by: Lars A. Gundersen | last post by:
So I'm starting out with CSS positioning, and it seems to work fine - until I check in IE6/Win, of course. I'm trying to use absolute positioning to place a box with my site's main contens area in middle of my pages, so that there are spaces for other things on all four sides of the area. CSS declaration: body { position: absolute; overflow: hidden; height: 100%;
2
2485
by: Rob R. Ainscough | last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web page controls were all over the place. "Ironically, absolute positioning is relative. Yes, you read that right. An absolutely positioned element is positioned relative to another element, called the containing block. Here comes the definition...
2
3152
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is that I would like to display some text on top of an image within the header. I've tried using absolute positioning to specify where the phone number should appear in relation to the parent div (#header). However the text appears to be positioned in...
6
2911
by: Mark | last post by:
hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img src='photos/thumbs/ bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div> where 'thumb' is my container, and 'del' should be aligned to the top right. here's the css
20
2807
by: mehstg1319 | last post by:
Hi there Not sure if anyone can help me, I am working on a site for my university, and am having a bit of trouble with css positioning. I am very new to css and do not know very much about it. Here is the link: http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html Basically, the problem is that the ticks on the grid look perfectly
14
3304
by: Fistro | last post by:
I'm trying to find a design that would allow me to build web pages without having to worry about compatibility issues (not too much, in any case,,,) I've came across this CSS layout technique: http://alistapart.com/articles/fauxabsolutepositioning It calculates the left offset from a fixed position, as opposed to calculating it from the right edge of the preceding element by using a combination of position: relative, left: 100% and a...
0
8004
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8425
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8418
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8288
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
5886
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
3912
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
2438
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1541
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1271
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.