Negative positioning needed for vertical alignment?

[ssarts]

Hello all,
This is my first ever table-less CSS layout. I've managed to line up everything the way I want it to look in Firefox, but to do so required using a negative top position amount. Why is there a gap between divs if I don't have the negative position in place? I just want each div to be directly under the one before it. No gaps. It seems to be in 14px increments, but I don't see anything that's 14 pixels that would cause it to shift http://www466.pair.com/sasspair/scarpello/index.htm

Can anyone enlighten me?
If you have any suggestions on a different way I should be positioning these divs, please speak up. This way seemed to work, so I used it.

Also, this layout starts to fall apart in IE. It's like the negative amounts are shifting everything up too far and stuff starts to overlap. The "latest Projects" are also wrapping funny in IE. Can I make a separate stylesheet specifically for IE, or do I need to go in and hack each thing for IE before it will work on both?

TIA!
-Shawn

[vtjustinb]

Hey Shawn, I applaud your efforts to go tableless and it is a rocky road at first so hang in there.

Divs inherently sit on top of each other if they come one after another in source order. The source of your problem is when you're saying things like "top: -14px" on a relatively positioned element, it actually shifts that element out of place but leaves its space back in normal flow.

Look at this example:


+-----------------+
:'''| |
: | top: -5px |
: | left: 10px |
: | |
: +-----------------+
:.................:


You'll notice that we've shifted the box with relative positioning (the solid lines), but the space where the box used to be in normal flow remains where it used to be. This space is maintained in rendering, so if you put a div right below it there will be a gap because the old space is still there.

I would suggest removing the positioning and just letting the divs vertically line up through source order and zero margins.

[ssarts]

I would suggest removing the positioning and just letting the divs vertically line up through source order and zero margins.

Thanks for the help vtjustinb, however, after removing all the positioning values, I still had to resort to negative margins to get them to line up properly. I don't know if using the negative margins is even a problem that I should be worried about, but I wish I knew what was going on that's making the extra vertical space between divs.

Thanks again,
Shawn

[CaptainB]

Try to apply this to your css. This will totally reset your margins and paddings and eliminate spaces.

* {margin:0px; padding:0px;}

[ssarts]

Try to apply this to your css. This will totally reset your margins and paddings and eliminate spaces.

* {margin:0px; padding:0px;}

Thanks CaptainB!
That seems to work just fine. I have to go in and adjust a couple spacing issues, but at least the divs are snug now.

-Shawn

[ssarts]

Try to apply this to your css. This will totally reset your margins and paddings and eliminate spaces.

* {margin:0px; padding:0px;}

Thanks CaptainB!
That seems to work just fine. I have to go in and adjust a couple spacing issues, but at least the divs are snug now.

-Shawn