Relative position question

@scratchyriceNov 19.2008

Hi all.
As i understand it, if i set a div position to ‘position: Relative;’, it will offset that div from a div surrounding it/parent div. However it works for the first div that i put in my main, centred content div. But when i insert a second small div, in the content div, it seems to offset correctly on the X axis, but on the y axis, it offsets from the previously made (other small one) div, rather than the main content div it is in. Why is this happening? Is it supposed to?

Below is some code demonstrating this.

[code] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html mlns=”http://www.w3.org/1999/xhtml> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> </head>

<style type=”text/css”> <!– body { text-align: center; }

#apDiv2, #apDiv1 { position: relative; width:400px; height:115px; left: 0px; border: solid; }

#apDiv2 { left: 405px; }

#index_Main { width: 810px ; height: 1000px; margin-left: auto ; margin-right: auto ; margin-top: 1px; margin-bottom: 1px; border: solid; text-align: left; } –> </style> <body> <div id=”index_Main”> <div id=”apDiv1> </div> <div id=”apDiv2> </div> </div> </body> </html> [/code]

As you can see, apDiv2, positions itself relative to the bottom of apDiv1, which is wrong. I want it to be totaly inline with apDiv1, and as far as i can see, and my logic dictates, the above code should work, but CSS so far seems to be a bit mucked up.

I would greatly appreciate it if anyone could help.

Cheers.

to post a comment

CSS

7 Comments(s) _↴

@rpgfan3233Nov 19.2008 — #Relative positioning is almost exactly like static positioning, except that you can use the four offset properties (top', right', bottom', and left'). The offset properties have no effect with `

position: static'', the default position for all elements.
 
 To understand this, consider the term <C>

normal flow''. Absolute positioning and fixed positioning take a specified element out of the </C>normal flow''. Relative positioning and static positioning leave the element in the <C>

normal flow''.  Now if you think about a page without any positioning applied (every element is statically positioned), that is the

</C>normal flow''. Inline elements are displayed next to each other, which explains the term <C>

inline'' being used; the contents of block elements always stay within their own block, taking up the entire width of the page, hence the usage of the term

</C>block''.  The important thing to remember is that these definitions are for elements when no positioning is applied to them.
 
 In short, your page is doing exactly what your CSS and markup says it should.  If you want them inline, try playing with <C>

display: inline'' in combination with height, width, margins, padding and the offset properties.  There are other ways to do it, such as with floats. However, you brought up the word

`inline'', so I figured I might as well offer the suggestion.

@aj_nscNov 19.2008 — #Use this:

<i>
 </i>#apDiv2,
 #apDiv1 {
 width:400px;
 height:115px;
 float: left;
 border-style: solid;
 }

If apDiv2 still shows up below apDiv1, then just adjust the width until they show up on the same line. No need to apply a position: relative or left:0px to either of these elements.

Oh yeah, also REMOVE this rule from your stylesheet:

<i>
 </i>#apDiv2 
 {
 left: 405px;
 }

@scratchyriceauthorNov 19.2008 — #Ok cheers. This is a very strange way of positioning objects if you ask me. Im used to using direct3D in c++, then everything to me makes sence. You just get a position of an object, and add an offset to it. Perhaps css should be updated to support something like 'position: Offset;'?

@aj_nscNov 19.2008 — #It has position: absolute at which point you can play with the offsets top, left right and bottom which was mentioned in a previous post.

@scratchyriceauthorNov 19.2008 — #Yes, but the idea is to set the smaller divs, at an offset from the large content div, which is centred to the page. With absolute its offset from 0, 0, Which in the d3d world is not an offset, its just a plain position.

@aj_nscNov 19.2008 — #I wouldn't say that's the 'idea'....it's a possible use. But you could also use position: absolute to set the offset of div's relative to the browser window which you could then treat as a 'plain position'.

But fair enough, I have no idea about 3d3 world. Interesting what kind of position (no pun intended) it puts a developer in to try and cross one field from another.....?

@scratchyriceauthorNov 19.2008 — #"I wouldn't say that's the 'idea'....it's a possible use.". Sorry i meant, thats what my idea was, what i was trying to achive.

"But you could also use position: absolute to set the offset of div's relative to the browser window which you could then treat as a 'plain position'."

Yes but then my page would not be fluid. And on resolutions smaller than what im developing on, the page would be off the explorer to the right. I wanted to be able to place small divs inside a larger, fluidly centred content div.

Yes tbh html is not really a [B]programming[/B] language as such. Its just a layout markup, so to me its very weird not to be able to dynamicly set the positions of things.

Thanks anyway.

Also in #CSS _↴

pop-up calendar overlay hides text but not form element unwanted space between li elements in IE tell me everything wrong with the homepage

Success!

Help @scratchyrice spread the word by sharing this article on Twitter...

Tweet This

Relative position question

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Relative position question

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴