Container DIV to auto size for absolute position contents

I am wokring on a CMS project.

I have a container DIV that contains a set of absolute position DIVs.  The DIVs each have a TOP and LEFT value uset along with an optional width and height that defines their position within the parent DIV.

Because my child divs are absolute position they are outside of the page flow and so the conteiner DIV is overlapping part of the child divs

What I need to achieve is for my container div to automatically resize in height (in particular) and perhaps width (less important) so that the child items are always shown.

I have tried a variety of things with FLOAT and CLEAR but there seems to be no change - I am not sure if I am doing the wrong thing or applying to the wrong DIV.

I dont normally use absolute position so maybe I am missing something - the resulting solution needs to work in moden browsers and as many others as possible.

ExPCUserAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

biXenCommented:
The container needs to have position: relative; if it has absolute positioned divs in it. But since they are out of the pageflow they are hard to control, so why not just put them outside of all the other divs, with just their own container on top of everything else?
0
ExPCUserAuthor Commented:
I tired setting te container to relative - it made a change but still totally wrong, instead of overlapping now its just all over the place.

There are a few divs containing divs on this page and I am working with teh immediate container so perhaps I am doing the wrong thing.

This is basically the layout is as below (this is a quick mockup from me) - the reason there are so many divs is they relate to parts of the page (header, footer etc) and have corresponding HTML content - I am working with code provided by a different person and didnt make it like this myself, its also ideal if we have to change the other DIV's as little as possible as they will change based on the design.


<div>
 
<div>
 
<div id="container">
        <div style="postion:absolute;top:30px;left:50px">Some content</div>
        <div style="postion:absolute;top:30px;left:500px"><img src=""/></div>
</div>
 
</div>
</div>

Open in new window

0
biXenCommented:
I think it would help if I know why you make them absolute? What's in the container? Or is the container just there to have the absolute positioned divs in it? Is the container also supposed to overlay some other content? (if so you can't put it relative as I said, so I was wrong if that's the case)
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

ExPCUserAuthor Commented:
Basically what I need to achieve is to automatically position content passed from a different system

so it will tell me what to put and where to put it with x and y co-ordinates. the co-oridnaties and number of items can vary.

I am using the divs so achieve this - also I need their position to be relative to the page area, not relative to the screen - i.e. 100px from the left of the parent element not the page.

I origionally used relative but that didnt seem to work and moved on to absolute which seems better but now I have this problem
0
biXenCommented:
Ok, I think I understand. Will the coordinates be set so that the child divs never overlap? And will they always be within bounds?

So that your only problem now is the container? I'm not quite understanding why the container not following the childs is a problem though. I'd like to see the CSS. Is there also any way you could strip the content, and show me the code?

Only relevant parts of course, but it would be easier to see how you are trying to solve it.
0
ExPCUserAuthor Commented:
I  have pasted in the code from the middle area - as I say the details come from another system and I then need to display - I thin width is controlled so they wont overlap that way, height I am not so sure about but if an absolute position is set it should be respected.

I have also attached a screen shot of part of the page.  as you may be able to see the bottom part of the page design is overlapping the botto of the content (this is clearest from the right image)

Does this make things clearer?

	<div  id="bodytext" style="width:800;">
					<div style="position:absolute;top:15px;left:31px;width:590px;" >
					<p style="text-align:left"><span class="Heading1">Veritus Definitiones Vim</span></p><p style="text-align:right"><span class="body">Cum illud feugiat no, odio quidam temporibus ad sit, per at gloriatur voluptatibus. Nam eu congue prompta deleniti. Nec quis utamur deserunt in. Sit dicunt melius ne.No has eloquentiam appellantur, cu solet utroque eos. Iusto voluptua eum te. Usu possit torquatos scripserit in. Sea ne audiam denique efficiendi, et mazim veritus definitiones vim, sea graeci mnesarchum contentiones in.</span></p><p style="text-align:right"><span class="body">Hinc congue vis at.Ut sapientem torquatos voluptaria usu. Nostro dolores dignissim ut nec, id sale libris facilisi qui. Inani neglegentur complectitur no est, ea alia detraxit pro. Numquam assentior id mei, est takimata democritum ea, est suas inimicus convenire ut. Iudico impetus facilis ius ex, cu elitr nonummy graecis eam. Possim discere patrioque id est.Sit senserit inciderint eu, ius postea corpora erroribus at, ea eam delicata intellegebat. Mel ad postea imperdiet, ut liber vidisse interesset sea, vidisse eleifend democritum cum at. Id volumus fabellas torquatos ius. An duo postea aliquip. Mei te melius argumentum, has unum mazim mediocrem eu.</span></p>				</div>
								<div style="position:absolute;top:5px;left:645px;width:152px;height:96px;">
						<img src="media/images/sidebox-1.png" alt="" />
					</div>
									<div style="position:absolute;top:105px;left:645px;width:152px;height:96px;">
						<img src="media/images/sidebox-2.png" alt="" />
					</div>
				</div>

Open in new window

snippet.jpg
0
biXenCommented:
Yeah, I get it now. The bad news: the bottom div has no way of "clearing" the above div, since it hasn't got any height, and it's content is out of the flow.

So I'd probably set the height of their container by using some javascript or something that calculated it based on the heights of the content you got in dynamically. That or solve it with another way not using absolute stuff. I never use absolute unless I know the height is set in the container it stays in. If you can set a min-height in that container it would work ok of course. Then you just clear both in the bottomcontainer and it's ok.
0
ExPCUserAuthor Commented:
I may have solved this myself by changing one div to relavite - if necissary we will have to work based on this.  Thanks anyway
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.