Can Someone Help with Absolute Positioning

by JayGreen

Posted: 14 years ago 8 replies

WEB DESIGN

I'm trying to float div tags from an image rather than top and left. Is this possible?
Thanks for help in advance.

#absolute #positioning

Istvan Horvath 14 years ago

I'm trying to float div tags from an image

You need to explain this...
- Thanks
- 1 reply
Signature
{{ DiscussionBoard.errors[3958874].message }}
- JayGreen 14 years ago
  
  Thanks for helping and I'll try to explain this.
  For example: this <div style="position: absolute; top: 670px; left: 200px;">content</div> will float content from upper left corner of the browser to point specified. I would like to tell browser the starting point (from an image) for floating tags.
  Let me explain a little of what I"m doing. I've designed a php include ajax survey. When user interact with the ajax survey, a new question loads. Each question uses floating div tags to display some of the content. The problem: if I update content around the survey, the height and width of the page may change. So I would have to update ALL survey questions to reflect new floating division positions. Since survey questions can number in the hundreds, this would be a ton of work.
  It would be easier if I could tell my browser where to start floating div tags.
  
  Thanks
  
  {{ DiscussionBoard.errors[3959231].message }}
ussher 14 years ago

yes it is, you need to give the parent div relative positioning, then the sub elements of that positioned absolutely will be absolute in relation to the parent.
- [ 1 ] Thanks
- 2 replies
Signature

"Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."
- jamroom.net
Download Jamroom free: Download
{{ DiscussionBoard.errors[3959226].message }}
- JayGreen 14 years ago
  
  Originally Posted by ussher
  
  yes it is, you need to give the parent div relative positioning, then the sub elements of that positioned absolutely will be absolute in relation to the parent.
  
  Could you give me an example of this? Thanks.
  
  Thanks
  
  {{ DiscussionBoard.errors[3959240].message }}
- JayGreen 14 years ago
  
  Originally Posted by ussher
  
  yes it is, you need to give the parent div relative positioning, then the sub elements of that positioned absolutely will be absolute in relation to the parent.
  
  Got it, thanks for the advice. Worked wonderfully!
  
  Thanks
  
  {{ DiscussionBoard.errors[3959346].message }}
ussher 14 years ago

Nice one!

Yeah that can be real easy to trip over to if you start to use absolute stuff in lower levels where there is a relative div above. Confused me more than once.
- Thanks
Signature

"Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."
- jamroom.net
Download Jamroom free: Download
{{ DiscussionBoard.errors[3959777].message }}
Saranya2011 14 years ago

Can anyone explain it briefly..
- Thanks
{{ DiscussionBoard.errors[3960903].message }}
ussher 14 years ago

Its hard to explain it any more briefly than the posts above, their pretty short, but here is some code to play with:

<div style="background-color: red; width: 500px; height: 500px; position: relative;">some div<div style="position:absolute;top:10px;right:10px;">ano ther thing</div></div>

if the top div does _not_ have position:relative on it, the inner div will be positioned relative to the top of the page. so ten pixels down from the top and ten pixels in from the right OF THE SCREEN. but if you add the relative to the parent div then the absolute positioning will be relative to the box it is in.

so ten pixels down from the top and ten pixels in from the right OF THE PARENT DIV.

hows that?
- Thanks
Signature

"Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."
- jamroom.net
Download Jamroom free: Download
{{ DiscussionBoard.errors[3960928].message }}