Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Div and relative positioning

What am I missing?

2:08 am on Feb 21, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
votes: 0

Ok, first of all, I *can* do what I need to do with absolute positioning. But I swear this should work with relative, without using float. I would be *ok* with float, but it seems to do different things in IE and Mozilla (big surprise!)

Ok. This is very simple.
Say I have 5 divs. I want them lined up all across, with their top border matching up horizontally.

I thought that


thought would work.. but it doesn't :( .

I am assuming this happens because div's put a carriage return at the end of their content... but I thought explicit positioning would override it. ANy thoughts, suggestions, corrections?

Thank you

[edit]Ok: a simple position:absolute with a 20% increase in the left property didn't work for me either... at all. Well, IE works, but I forget: it doesn't size the containing div of my 5 divs because the content is absolute (I think), and mozilla is just doing horrible with it.[/edit]

3:01 am on Feb 21, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Dec 22, 2002
votes: 0

when you use 'position:absolute' the containing <div> can't see the size of the absolutely positioned <div>. So, if the containing <div> only has absolutely positioned children, the height and width of the containing <div> will both be zero! You *can* use JavaScript to analyse the children of a <div> and then adjust the parameters of the containing <div> accordingly, but it's not a trivial exercise, and I'm unsure as to cross-browser compatibility.

relatively positioned <div>s has a default display of inline, which - as far as I've been able to ascertain - means that height and width don't work on the element

now, the simplest way to get 5 <div>s to display side-by-side across a page is to use {position:absolute ; float:left ; width:20%} but that also means that you'll have to *guess* the height of the containing <div> if you don't do something explicitly about the height of the contained <div>s

3:38 am on Feb 21, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
votes: 0


so you are basically telling me, floats have got to be it, huh? Well if thats the way it has to be, then thats just what I gotta do. I have yet to give up though!

3:48 am on Feb 21, 2003 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fathom is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:May 5, 2002
votes: 109

When in doubt... Back to the source W3C.org 9.8.2 Relative positioning [w3.org]

Visual formatting model

5:36 am on Feb 21, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
votes: 0

Ok then... well usually mozilla is the champion of standards compliance, right?

The results of my relative positioning, and why I am confused:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<link rel="stylesheet" type="text/css" href="styletest.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<div id="one">hi again sirs</div>
<div id="two">hi again sirs</div>
<div id="three">hi again sirs</div>
<div id="four">hi again sirs</div>
<div id="five">hi again sirs</div>


position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
font-family: verdana,arial;


ok this is what I see happening.

In Mozilla, they almost line up perfectly, aside from the border issues created (my divs are actually 30% + 2px tall), so my adjustments are not pixel perfect... hence, each div is 2 lower than the last. This also begs the question, is their anyway to "add" percentages and pixels. I know there isn't, but man their should be.

So, for every consecutive div, mozilla places the "point of reference" at the bottom of the previous div, but keeping the *left* point at the edge of the containing div. So, the left: 0%, 20%, 40%, 60%, 80% works, in both browsers.

The nasty part is this. The top percentage: 0%, -30%, -60%, -90%, -120% works basically ok in mozilla. Essentially, that means the "point of reference" is getting pushed down with each div.

But, in IE, if I am not mistaken, the point of reference is only halfway down the div before it. So, with the 30% up, which is the height of one div, the second div is halfway up the first div, and the 3rd only has the border on the screen. 4th and 5th are above the screen.

So, does this rendering behavior make sense to you guys? Is mozilla or Ie doing what you would expect?

Sigh :)
[edit]After reading the w3 specifcations again, I realize that mozilla's rendering makes sense. Of course, IE's doesn't. But IE is strange. I really can't explain it from any viewpoint. It seems to be taking a "midstance" completely incorrect and correct (which in web programing is still completely incorrect) [/edit]

8:21 am on Feb 21, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
votes: 0

Well,I do have the layout I desire working 99% perfectly in Mozilla and IE 6.

But I did have to use float, which I had working before this post. I just didn't want to waste anyone's time if they were coming up with float solution.