Forum Moderators: not2easy
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
particularDiv{
position:relative;
left:0px;
}
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]
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
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!
Visual formatting model
The results of my relative positioning, and why I am confused:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="styletest.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head><body>
<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></body>
</html>
body{
height:100%;
width:100%;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color:#d3d3d3;
font-family: verdana,arial;
}div{
position:relative;
border-width:1px;
border-style:solid;
width:18%;
height:30%;
}
#one{
position:relative;
left:0%;
top:0%;
}
#two{
position:relative;
left:20%;
top:-30%;
}
#three{
position:relative;
left:40%;
top:-60%;
}
#four{
position:relative;
left:60%;
top:-90%;
}
#five{
position:relative;
left:80%;
top:-120%;
}
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]
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.
