[sam]

Ok so I was working on a page with three column layout [three divs inside a parent div]. Marc had helped me out with this earlier [Thanks Marc. Thank God I saved his file !]. Since I remembered the arrangement I started building. I see that the last column kept on jumping below and falling out of line. So I load up Marc's file and compare with it side by side and I see no problems but can't track down source of error either. So I start modifying my file to match Marc's file. I have reached a point where the css contents match but the problem still exists. I always thought the order of div's did not matter but I prefer to put them in order so I had ColA ColB and ColC in order. I look at my refrence the order was ColA ColC and ColB. Change the order and voila it works ! I almost smacked my head on the wall trying to solve this problem. At this point I am confused as to why this happens. Anybody any ideas ? I have attached the files I was working on. Thank you.

Attached File(s)

•  not_working.html (935bytes)
  Number of downloads: 3
•  working.html (935bytes)
  Number of downloads: 3

[Catalyst]

If you're using absolute positioning then the order doesn't really matter. Floats are a whole different thing though as they work in relation to what comes before/after the floated element.

[marcamos]

Here is why they must be ordered columnA, then columnC, and finally columnB; it's the magic of floats really. One person told me, back when I was learning all about floats, the following: "Always remember that a floated element is no longer part of the normal document flow".

This essentially means that a floated element no longer adheres to the common rules of how things can effect each other. This is why they need magical ordering.

Whenever you float something, you always affect everything below it, and rarely affect anything above it (in the source code I mean).

By inserting the left column (A) first in the code, and floating it left, it allows all other elements below it (in the code) to come up next to it, typically to the right.

Then, you need to establish that the right column [C] be placed over against the right-edge, so you insert it next in the code, and float it right. (This allows elements below it to come up next to it, usually to the left).

Since both A & C are floated, and there is a huge gap between them (AND, as I wrote above, floated elements allow anything below them in the code to come up next to them), then column B naturally, without any float properties, will just squeeze up in between them.

If you attempt to order the code A, B, C, you lose the ability to float C over to the right, because it has no effect on elements above it, only below it.

[TJSingleton]

The following code should allow you to put the source order any way you want without affecting the presentation.

body {
position: relative;
width: 80%;
margin-left: auto;
margin-right: auto;
border: 1px solid #666666;
}

div#columnA {
position: absolute; 
top: 0;
left: 0;
width: 200px;
height: 300px;
background-color: #0000FF;
}
div#columnB {
margin-left: 200px;
margin-right: 200px;
height: 300px;
background-color: #66FF00;
}
div#columnC {
position: absolute; 
top: 0;
right:0;
width: 200px;
height: 300px;
background-color: #FF0000;
}

[sam]

Thank you all for your resourceful replies. Once again that was a big leap for me. I hope I did not annoy anybody with my huge rant . I should say I always thought floats were cool since they move around. But now... hmmm I may have to change my opinion. I did the same layout I was talking about with absolute positioning and got it right the first time. But then may be my opinion is biased since I am annoyed with floats right now haha. Anyways thanks all that was a real eye opener for me.

[Catalyst]

I tend to avoid floats when I can, preferring the method TJ posted. My issue with them is that if the browser window isn't wide enough, and you don't take some extra steps to prevent it, then the whole layout gets distorted as the floats start stacking on top of each other.

[marcamos]

I stand alone in my pro-float, anti-positioning camp... but hey, at least we have our options!

[TJSingleton]

I want a bumper sticker that reads: "My positioning can beat up your floats"

[TJSingleton]

Anyways, "FLOATS DON'T SUCK IF YOU USE THEM RIGHT" - Meyer
They were just never meant for layout.... But you can feel about the how ever you want

This post has been edited by TJSingleton: 14 February 2007 - 05:04 PM