homepage Welcome to WebmasterWorld Guest from 54.211.7.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Div and relative positioning
What am I missing?
SethCall




msg:1205323
 2:08 am on Feb 21, 2003 (gmt 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
particularDiv{
position:relative;
left:0px;
}

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]

 

BjarneDM




msg:1205324
 3:01 am on Feb 21, 2003 (gmt 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

SethCall




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

POOHOO.

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!

fathom




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

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

Visual formatting model

SethCall




msg:1205327
 5:36 am on Feb 21, 2003 (gmt 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"
"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]

SethCall




msg:1205328
 8:21 am on Feb 21, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved