Topic: Breaking free of tables: take two (abs vs rel positioning)

http://pc247h8312.med.unc.edu/samara/

This is my second attempt to work without tables. Trying to keep it simple. I have a header across the top, a top corner image, a horizontal nav bar, and a bottom corner image all absolutely positioned. Now I want the content to flow around these elements.

Please save my hair from being pulled out! I've tried many combinations of absolute/relative/fixed positioning, float, etc.

By the way, colors/layout are still in flux. Please concentrate just on getting the content to flow for now. Other comments are welcome, but this is my main goal for now.

http://pc247h8312.med.unc.edu/samara/

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://pc247h8312.med.unc.edu/ccbc/index.cgi

quote:

---

all absolutely positioned. Now I want the content to flow around these elements.

---

From the spec -

quote:

---

Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings.

---

My advice: leave absolute positioning alone.

Almost everyone attempting to go from tabled layouts to CSS goes straight to absolute positioning. It's an evil trap, and should be avoided for nay 'normal' layout.

My advice is to simply not specify any positioning at all. Things will default to 'relative', and will allow a natural page flow. It is much simpler to figure out how to work things out the way you want them with relative positioning than it will be to figure out how to make things 'flow' with objects that simply o not flow.

yeah! that's 2 divs, a header and main, little background-image here, a little nested floated menu div there, voila!

no need at all for anything absolutely positioned in that layout

Thanks for helping a newbie.

When I read the spec and tutorials, it seems to make sense, but as you can see my results are less than stellar:

With relative positioning: http://pc247h8312.med.unc.edu/samara/samara.html

With absolute positioning: http://pc247h8312.med.unc.edu/samara/samara_abs.html

The second one looks much better. What is wrong with the relative one?

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://pc247h8312.med.unc.edu/ccbc/index.cgi

Rereading my words, I see I did not accurately say what I meant.

What I highly recommend to people, in about 99% of layout cases (and this is certainly one of them), is simply forget about positioning altogether - aside form perhaps a couple specific cases here and there.

By trying to set positions for your elements, you generally only end up confusing things.

The normal flow of the document will automatically fall into he proper place with minimal control in a whole lot of cases.

What I would recommend is removing the positioning info from the CSS altogether, except for things like background images that need to be specifically placed.

Play around with margins, padding, and if needed - floats.

As Obi-wan would say - you must let go your conscious self. *feel* the CSS flowing though you...

you need to specify a doctype first of all, secondly, I've made some changes for you to look at here as we go over the points of change (all based on the xhtml transitional doctype and not gone over for browser compatability and applicable hacks applied, there are also commented notes in the markup/css itself):

1. you had an errant closing style tag:

<link href="samara.css" rel="stylesheet" type="text/css" media="all">

</style>

2. there was no closing tag for <div class="content">

3. all your tags need to be closed:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">...

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<img src="images/spiral_small.jpg" width="150" height="150" alt="">...

<img src="images/spiral_small.jpg" width="150" height="150" alt="" />

4. did a find and replace to just remove every occurance of position relative in the stylesheet (as a result there may be an errant ";" here and there ) and removed all (I think) the occurances of top: left: right: ect as those need to be preceeded by position:absolute to have effect

5. added a utilitarian class "floatl" and used it to float the samara_logo and then added the text-align:right and margin-right to the p in the header div (top-stretch), you could monkey with margins on that P to position it further to your liking

6. navigation:
- put navcontainer inside the content div (semantics say no probably but we're trying to display positioning help here mostly right?) and floated it right
- removed 100% width of the nav ul in order to allow it to float properly to the right

7. lessee, can we remove that s-tail div? yes, by putting it in the background of #content (changed "content" from a class to an ID as it will only be used once per page and is a structural element) changed your content margin to padding, this will allow the background-image to align with the image in the header.top-stretch

8. moved the overview image inside the content div and voila, it's been position acccording to the padding applied to that div and lines up with everything else. I also removed the P tags around it, the P is a block level element and the one above the image will force the image to a new line anyhoo.

9. removed the div class="spiral" and added the graphical element to the background of the BODY

I noted things here as best I could as I went through it but I'm not necessarily known for my documentation prowess Let this be a starting point to jump off from and ask questions, there's been plenty left open for discussion!



weird editing's afoot here...

(Edited by JKMabry on 10-20-2004 20:47)

Wow. I mean... wow. This is more help than I ever expected, and it makes things MUCH clearer. I knew this was a forum of serious designers, but this example has taught me more than 10 tutorials. DL-44, and especially Jason, thanks. I'll take the example you have created and study it to understand the innards.

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://pc247h8312.med.unc.edu/ccbc/index.cgi

ask question to get answers! If you copy and paste it and go away I won't help anyone else for another 3 years

All excellent points JK

Making sure you have a Doctype, specify encoding, and validate your code will go a long way to clearing up any issues your page may be having.

Of course, 100% validtion isn't a necessity, but ususally isn't hard to achieve, and validating will catch any blatant errors that you may not be aware of.

Jason,

I promise I will not cut, paste, and go away. You've earned more interaction than that.

Questions soon.

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://pc247h8312.med.unc.edu/ccbc/index.cgi

Sooner than we thought...

I used your page as a starting point. As nice as it is, it has some issues. When browsed by a Mac, for example, the S-tail is missing, as well as the spiral image in the bottom corner. Also, the nav bar does not float properly. But your code was much better than mine, so I used it.

I'll spare you the details, but I went through many iterations of positioning and other stuff, and absolute is still the only thing I could get to work. Here is where it is now:

http://pc247h8312.med.unc.edu/samara/samara_abs.html

I took out the bottom spiral and changed some colors/margins, but this is very close to how I want it to look. I'd rather not have the big band of white space after the nav bar, but otherwise it plays nice with all font sizes, in Mac or PC. So... what is wrong with absolute again?

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://pc247h8312.med.unc.edu/ccbc/index.cgi

quote:

---

what is wrong with absolute again?

---

Well you answered your own question about why relative is better than absolute in this case in your requirements from your first post:

quote:

---

Now I want the content to flow

---

and as DL pointed out in the first reply, absolute equals NO FLOW AROUND anything at all.

The example I posted was meant to be used to show you a few techniques that you had apparently not considered, not to be your final layout and markup. instead of absolutely positioning items try floating them if you want to have other elements flow around them (similar to the img align attribute in html 4).

Absolute positioning, as we've discussed, removes items from the flow of teh document.

That means that, appearances aside, the document simply doesn't flow.

You can make an absolutely positioned layout "work".

It's much harder to make it expandable, flexible, and logical.

Well structured mark-up is the first step to a document that flows well. Second is good use of CSS, without resorting to positioning.

Float is your friend.

As I said initially - the desire to closely control is hard to shake, but it pays off in the end.

Ok... I'll unlearn what I have learned and feel the relative flow through me.

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://pc247h8312.med.unc.edu/ccbc/index.cgi