SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning, when to use what?

    Positioning options where should you use what?

    Normal divs layout
    Relative
    Absolute

    When do you just have normal layout with floats etc nice and structured, can you not just use Absolute floating around and i don't know what relative really means.

    Just wondered where you should use what or is it personal preference.

    Bit random, but was wondering

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jezthompson12@nt
    Positioning options where should you use what?

    Normal divs layout
    Relative
    Absolute
    You left out floats, which right now seem to be the most flexible and robust option.

    Normal flow comes first, as you have suggested. It should layout most of your elements.

    Use floats to position columns.

    Use AP and RP sparingly for special effects.

    Floats seem to work best for cross-browser compatability and general robustness when users utilize different font or window sizes.

    But don't over-use them. For a two column layout for example, you only need to float one element.
    Ed Seedhouse

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Relative positioning is not useful as a layout tool. It displays an element in a different location, but it still occupies the space it would have if it weren't positioned at all.

    Absolute positioning works, unless you want a full-width footer (and you can't guarantee which column will be the tallest). Just make sure you know what your containing blocks are.

    As Ed Seedhouse said, floats are often the most useful tool for CSS layouts.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, very interesting.

    So absolute is almost like, err i need this here but cannot get it there without.......?

    Sorf of.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have a look at the faq on floats for more info and read the other faq on positionng for a quick insight.

    http://www.sitepoint.com/forums/show...4&postcount=13

  6. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very interesting read.

    However, can you who know more than me explain why this site is built with relative and absolute positioning and by the looks of it doesn't have any problems and was included in this months .net mag?

    Interested to know your thoughts and why you think they chose that way?

    Cheers

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Interested to know your thoughts and why you think they chose that way?
    Well the code is invalid for a start and uses tables for layout and is badly structured. Try resizing the text in firefox and see what happens!!

    They have only got away with it in ie because they have used pixel sizes so the text can't re-size.

    There are inline styles and missing tags and errors in the code that make it look very amateurish.

    The layout in fact uses no relative positioning at all (apart from a minor 3px tweak which is in an inline style (the biggest sin of all)). All the position:relatives in the code are for stacking context so that z-index can be used and so that absolute elements can be placed in respect of the parent and not the viewport. there is no movement via relative positioning at all so it has no appearance effects.

    They do use about 44 floats as well as lots of absolute positioning.

    They can get away with this (almost) because the home page is so rigid in height and width that everything can be absolutely placed as there is no flow to take care of. Remember what I said about the text re-sizing and you will see that nothing expands with the text and after one or 2 resizes in firefox the page is worthless.

    If you have a fixed height and fixed width layout then you can use absolute positioning but it makes it hard work as you have to work everything out with co-ordinates etc.

    However they have also used floats to maintain some resemblance of flow on some pages.

    Usually when you design a page you will use a mixture of positioning systems such as floated, absolute and static. Most of the time you will be trying to preserve the flow of the document but in the right place at the right time absolute positioning can and should be used. If you absolutely place fixed size elements you can always preserve the space because you know their height and can compensate. However the same can usually be achiieved with floats anyway

  8. #8
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul, very interesting.

    Have you then got a site that you have done or you have seen that uses relative and absolute positioning correctly getting the best out of them?

    Or some perfectly made css sites in general

    Always interested to see the absolute best in something.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm afraid I don't disclose or discuss my clients sites to public forums and it would be self promotion anyway which us not allowed

    I work on about 3 new sites a week and then strictly only on the psd to css conversion. I rarely get to see the finished product these days as I create a template and then hand it over. I don't do any designing myself as that is not my strength.

    To see how position relative can be used you can look at this simple demo:

    http://www.pmob.co.uk/temp/3col-content-first.htm

    That show the effect that relative positioning can have and how it can be used in a structural layout.

    There are many css showcase sites out there that don't really need my help in pointing them out and I'm sure you can find links to them in the tips section anyway.

    With css there is often a number of ways that something can be done and whether its right or wrong depends on the task in hand. The site you mentioned above is a fixed width and has a lot of fixed height elements and therefore absolute positioning can be used in a lot of places. However in a fluid width site you would find absolute positioning a nightmare to maintain.

    When I code a site the main thing I always try to do is preserve the flow of the document so that the next element on the page can flow logically. This usually means mostly static and floated elements but a mix of absolute positioning can still be used where height is presreved and the flow isn't lost.

    In the site you linked to above the box images on that page should have been capped top and botton and the middle section could then be fluid and allowed to expand when the text was resized. This would have allowed the site to scale better but would then of course upset the next absolutely placed box. If the boxes were floated then as they expand everything else will move out of the way accordingly as the flow of the document can be regained.

  10. #10
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul very handy.

    I was trying to think of a design which you would have to use relative and absolution positioning and below is what i came up with.



    Surely this would be?

    The gradient image in the background then a li nav on top at the bottom, the login button and search surely they would need to be on a layer above i.e absolute positioned each one and the gradient background a relative div. Otherwise the would not fit nicely over the top of the gradient image?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can just float it all.

    This is a very quick rough and ready example

    http://www.pmob.co.uk/temp/jez.htm

    Try that in ie and then resize the text to the largest and see how it all scales nicely.

    The login could have been absolutely positioned to the right and the nav could have been absolutely positioned in the bottom of the header div as long as the height was preserved in some way.

    However floats do it just as well and it doesn't suffer form the rounding bug that ie applies to positioned elements when you use bottom:0.

    The nav is placed after the header and then dragged with a negative margin into the 2em bottom padding that i placed on the header. The nav is also 2em high and this preserves the space nicely. When the text is re-sized in the browser the padding increases at the same rate as the nav and they stay together.

    There probably is a million other ways to do this also

  12. #12
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thats impressive.

    Thought i had thought of something which would have to use absolute

    Oh well, thanks again Paul very interesting.

    Was thinking about what you put about that split the atom site using lots of absolute etc, surely they would know that? Perhaps they just decided that people using that site would not need to zoom in? Surely they would have know what you told me about it?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Surely they would have know what you told me about it?
    They would know but they just don't care

    A lot of web design firms are still behind the times and just code for IE and nothing else and have no care about accessibility issues at all. Its only when users become more educated that things will improve.

    The site you mentioned isn't that bad and is mainly images anyway but it would take longer to develop if you do it properly.The bottom line is often the initial cost without a thought for what they may be losing through people who can't read the site as that is not an accountable figure.

  14. #14
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see, interesting

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    They would know but they just don't care

    A lot of web design firms are still behind the times and just code for IE and nothing else and have no care about accessibility issues at all. Its only when users become more educated that things will improve.

    The site you mentioned isn't that bad and is mainly images anyway but it would take longer to develop if you do it properly.The bottom line is often the initial cost without a thought for what they may be losing through people who can't read the site as that is not an accountable figure.
    Sad but true Paul, sad but true.

    What's even worse is they get offended when you offer (politely, of course) to upgrade those sites for them.

  16. #16
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well i had ago at building what you did Paul, with a different nav and doing from scratch using yours as a guide.

    Here it is not sure if its ok, i mean it looks ok when online from the one's i have checked apart from when you resize its not as nice as yours.

    Also i did it in DW as i like to see what i am doing rather than typing out the code and uploading straight away. However, the above is all over the place in DW cannot recognise anything. I suppose it doesn't matter as it seems to look ok online :s

    I got abit lost half way through and just played around so dunno how it really works.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    That looks pretty good

    You could size the width and height of the header in ems and then it would scale altogether uniformly.

    DW is not a browser and you should not use it for checking yor work. Just preview it in a browser and work in code view all the time.

  18. #18
    I hate Spammers mobyme's Avatar
    Join Date
    Apr 2004
    Location
    Sunny Snowdonia
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When all else fails, relative position does get rid of disappearing text syndrome in IE6.
    Strange but true. Probably not a good reason to use it though.
    There are three kinds of men:
    The ones that learn by reading.
    The few who learn by observation.
    The rest of us have to pee on the electric fence.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Strange but true.
    You will probably find that the actual problem is a "layout" issue and forcing layout will more than likely negate the need for adding position:relative and is usually a more solid solution. However position:relative does fix some other disappearing bugs as well by creating a stacking context and making the element appear above the background and not under it

    99% of ie's bugs can be traced back to "haslayout" and is usually the first thing to try


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •