Making the Absolute, Relative

36 comments (Comments closed)

1. At 2:14pm on 3 sep 2003, Jeff Croft wrote:

Great article, Doug. This is a complicated and often confusing aspect of CSS, and you’ve done a great job of putting it into human-readble form!

Jeff

2. At 2:20pm on 3 sep 2003, Fred2000 wrote:

You just wanted an excuse to make pretty diagrams using that bloggerific tiny block font!

3. At 4:48pm on 3 sep 2003, Jai wrote:

I wish more tutorials explained this! This was a great read Doug!

4. At 5:38pm on 3 sep 2003, Seamus wrote:

Great article. This is something I stumbled acrossed a few months ago and have been able to use in many ways. It is one of those tips that really is nevered talked about.

5. At 10:18pm on 3 sep 2003, Caspar Fairhall wrote:

Thanks for writing with such clarity and authority on this subject - very enlightening. It’s not an intrinsically complex subject I suppose, but it is easy to become confused at first. Well done.

6. At 12:08am on 4 sep 2003, s t e f wrote:

Doug, just for the sake of theory, why not have used a float element for your navigation and a margin-right for your content?

The result would have been the same without even needing the container, wouldn’t it?

7. At 12:40am on 4 sep 2003, caio chassot wrote:

stef, I have an experience that it’s usually better if you can avoid using floats.

theoretically, using either floats or positioning would indeed achieve the same result.

in practice, floats would wreak havok in some *cough* ie/win *cough* browsers depending on what you did inside the floated divs, as, for example, floating more stuff inside it.

lastly, with positioning you have better control over linear content order than you have with floats.

8. At 2:01am on 4 sep 2003, Rahul Choudhury wrote:

I wish CSS-3 would just get done/supported by browsers already so we could use columns and its other features instead of having to do all these workarounds with positioned and/or floated elements…

9. At 2:02am on 4 sep 2003, kimBlim wrote:

Doug - your “articles” are an inspiration to me (and many others, I suspect). Thank you for providing such great tutorials..

10. At 2:21am on 4 sep 2003, Michael Guitton wrote:

Thanks for the article however diagrams won’t print (!?) Maybe you need to tweak your print style sheet.

11. At 3:05am on 4 sep 2003, scotbebop wrote:

The article is excellent. This CSS novice just had to say thank you.

12. At 3:07am on 4 sep 2003, Tobias wrote:

Thanks for this great article!
Now some important facts got more clear to me :).
Really nice diagram-design! Beside loocking good they are very helpfull to understand what you are talking about :).

13. At 4:09am on 4 sep 2003, Paul Michael Smith wrote:

Yep, nice read doug.

14. At 7:04am on 4 sep 2003, Josh Heyer wrote:

Doug,
I appreciate your detail-oriented style of explaining things. You’ve cleared up some positioning clouds in my mind that have been tough to see through. I particularly like the diagrams, which really help with the clarity of the article. A much recommended read!

15. At 8:38am on 4 sep 2003, Luke Redpath wrote:

Great one Doug - nice to see somebody point out this technique, because IMHO this method of absolute positioning can be a lot easier and more reliable than using the float system, which is very quirky.

I used the technique here for a 3 column layout, no floats, which some people might find useful:

http://www.sonicdeath.co.uk/stuff/3colnofloat.htm

16. At 8:42am on 4 sep 2003, Luke Redpath wrote:

Sorry - to save you hassle - 3 Col, No Float

17. At 8:45am on 4 sep 2003, blakems wrote:

Great article, well written. I have found using positioning, absolute and relative, the main reason to switch to CSS for layout. I have had to switch column positions in the past for clients and all it takes is switching the positioned div from “left:0; to right: 0;” Works like a charm.

18. At 8:47am on 4 sep 2003, Anthony wrote:

Thanks so much, Doug. I have been wanting to redesign and move to a tableless layout but every time I delve into positioning I get confused and have unpredictable results. This was very enlightening and I think it will help enormously.

19. At 8:56am on 4 sep 2003, Todd Dominey wrote:

Say it with me now…book. Book. BOOK. Write a book! Nice tutorial.

20. At 9:04am on 4 sep 2003, Doug wrote:

stef (from #6): Doug, just for the sake of theory, why not have used a float element for your navigation and a margin-right for your content? The result would have been the same without even needing the container, wouldn’t it?

True, floats can often produce similar results. I find the use of floats or absolute positioning depends on the design and the effects the designer wants to achieve. I started out using floats when I redesigned Stopdesign last year. It was actually the main content column which was floated, the right-side navigation left unfloated, for benefit of order of content. However, I found that for the details I was going for on Stopdesign, absolute positioning produced the results more accurately and more reliably.

Floats are used extensively for columns throughout the Adaptive Path design. But to gain control over widths, content order, and reliability, I actually use two separate containers which are wrapped around the columns. Someday, I plan to write up a description of how the column layouts work in the AP design, and how the team can dynamically change layouts by simply changing the body class.

21. At 10:22am on 4 sep 2003, Jai wrote:

I agree with the BOOK statement… but I digress to different consideration; semantics. Do you think it’s semanticly ok to place a container div around stuff, or is that breaking the semantic markup for the sake of sanity? Just a pondering I’m having…

22. At 10:50am on 4 sep 2003, Lea wrote:

I say “Aye!” to the book. ;) Really, Doug, if you taught classes on this stuff, I would go every day and not fall asleep. I swear. Just reading your articles really clears up the cobwebs about some CSS confusion. Good on ya.

23. At 11:37am on 4 sep 2003, Doug wrote:

Jai: Do you think it’s semanticly ok to place a container div around stuff […]?

Many times, divs are placed into the markup purely for the sake of control over presentation. This is usually considered a “bad” thing. But with the current state of browser support for CSS, I still see it as a requirement in some cases. If CSS2 selectors were widely supported in all modern browsers, we’d be able to ditch many of the style hooks we currently find the need to leave in the markup.

If I see no other way to make a layout work without using a generic container div, I at least like to give it meaning by identifying it as somthing — in Stopdesign’s case the column wrapper is identified as: id="content", which could be used to scrape content or as an anchor position for skip link.

24. At 10:42pm on 4 sep 2003, Darin wrote:

Is it valid to position a div relatively (to take advantage of position: absolute in one of its contained elements), without actually positioning it anywhere? For example, let’s say its horizontally centered using “margin: 0 auto;”. Can I declare “position: relative” without an accompanying top/bottom and left/right value?

25. At 11:55am on 5 sep 2003, Doug wrote:

Darin: Is it valid to position a div relatively […], without actually positioning it anywhere?

Yes, it is. The top/bottom and left/right values are just box offsets. They can either take length measurements (as you’re probably thinking), percentages, but can also be auto, which is their default value.

An element may be assigned to any of the position values without using any box offsets at all (leaving them as auto).

26. At 12:15pm on 5 sep 2003, Submunition wrote:

Heh, great stuff, I love it. Now, what I need to master is the art of footers, but I think that this article has provided me with some insight that I can apply to my struggle.

Oh yea, what is that tiny font called again?

27. At 1:46pm on 5 sep 2003, Doug wrote:

That ever-so-common font is Silkscreen, created by Jason Kottke

28. At 3:15pm on 5 sep 2003, Mike wrote:

Great stuff Doug, thanks in particluar for taking the time to share something like this in such a thorough manner. This stuff makes me stop taking for granted what I know and rethink the methods I use.

29. At 10:28pm on 6 sep 2003, Michael Romero wrote:

this is a great article that explores some of the idiosynchracies of css2. what i don’t understand yet (at least — i’m still pretty new to xhtml/css based design) is to do one thing here on stopdesign that you’ve done, and that’s have the black bar for your subcol go ALL the way down the right side. on the site i am working on i’d like to be able to do that, but don’t know how to properly code the css for it. right now i’m cheating it by passing a style declaration to the div on each page, but this is an inefficent hack of an inexperienced coder. i’d like to learn how it works.

however, this information was very useful :D

30. At 2:00pm on 7 sep 2003, Chris Hester wrote:

Why not use a border? That way you can get a right column that matches the height of the main one. In this case, the border would be the black space. The right column text is merely laid on top with a transparent background.

I’ve used this trick on my site. Take a look.

31. At 3:24pm on 7 sep 2003, Hrunting wrote:

The only issue with the wrapper content method is that IE6/Win (possibly other IEs as well) does not expand the wrapper relative element’s height to include the inner absolutely positioned element. If the maincol content is shorter than the subcol content and the subcol height does not fit in your browser window, you cannot scroll to see it. It looks like the inner absolute DIV is removed from all rendering calculations completely.

See what I mean here vs. here (the second uses two absolutely positioned columns).

There may be a non-JavaScript workaround, but I haven’t found it.

32. At 1:09am on 8 sep 2003, Kris wrote:

Absolute positioning of the columns outside the #content DIV would have been perfectly possible by using ems for top or margin-top property. How many ems depends on your skill with a pocket calculator.

Nevertheless, Doug, your story explains a principle I have not thought about before.

33. At 9:06pm on 8 sep 2003, Hrunting wrote:

Leave it to comments to pave the way to success. A few hours after posting, I discovered that I could resolve my issue by assigning a width to the outside content DIV. That’s why the second link doesn’t exist anymore.

As for relative vs. absolute, the relative wrapper is nice for when you don’t want to have to worry about possibly adding additional preliminary content (like a note or another menu bar) later on. You can just add it and rest assured that your old content will render below it, without having to bust out your pocket calculator again.

34. At 3:38am on 12 sep 2003, Ben wrote:

This works perfectly on either IE 6 and Mozilla (both PC version)
If I take the same code and apply an absolute position on the left (instead of right, in the example), I’ve got a bug on IE 6 PC (www.flapsdesign.com/test.html). The left: 10px value is measured from the left border of main div instead of left border of content div…
This bug doesn’t appear in Mozilla or Safari !
Is there a way to correct that ?

bla
bla

35. At 10:55am on 16 sep 2003, Steve Cote wrote:

I’ve had a little trouble making fixed centered layouts using floats. They break when the content gets too big.

In a nut shell, are you saying I can abandon the floats if I make my main centered div relative position I can use absolute position for the child divs?

36. At 5:18pm on 16 sep 2003, Kris wrote:

Doug,

Thanks for the write up! I think I am slowly grasping the answers to some of the niggling little problems I often run into.

Thanks again.

Comments no longer open for this entry.