CSS: absolute DIV inside relative DIV, relative DIV not expanding

I'm having trouble figuring this out. Here is my test screen:

https://www.interactivehealthpartner.com/tool-login10.asp

Within the tons of source code, see relevant code attached. I put colored borders around the two DIVs. I don't understand why the blue DIV is not expanding the red DIV, since its inside it.

I have the <div class="clear"></div> after the absolute-positioned DIV, shouldn't that take care of it? This is causing problems because on some screens I have other content after the table, and that content is underneath the table instead of after it.

Would appreciate another set of eyes on this. Thank you!
#membertablewrapper{position:relative;width:100%;border:2px solid #ff0000;}
#membertable{position:absolute;top:0px;left:0px;right:0px;overflow:auto;border:2px solid #0000ff;}
div.clear{clear:both;}

<div id="membertablewrapper">
	<div id="membertable">
		<table border="0" cellspacing="0" cellpadding="0">

(table data here)

		</table>
	</div>
	<div class="clear"></div>
</div>

Open in new window

Brad BansnerWeb DeveloperAsked:
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.

COBOLdinosaurCommented:
It is not inside it.  When you apply absolute positioning you take the element out of the normal.  It is independent of its parent and everything else in the page.



Cd&
0
SSupremeCommented:
This problem arise because of incorrect use of absolute positioning.
First question is why do you need absolute positioning there?

Most likely you can avoid using it in the way you use it now.
Otherwise you can use javascript to make membertablewrapper's and membertable heights equal.
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
Brad BansnerWeb DeveloperAuthor Commented:
I always thought as long as you put your absolute DIV inside a relative DIV, that the absolute would align itself inside the relative. That is not true?
0
Ultimate Tool Kit for Technology Solution Provider

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 now.

COBOLdinosaurCommented:
The absolute position element uses the position of the parent to set its position and that is all.  The purpose of absolute positioning to for dynamic effects that re-position the element with scripting.  If it was part of the natural flow it would force re-positioning of other elements around it when it was modified and even the re-rendering of the whole page.  It is not very usable for layout, and not recommended except where dynamic effects are being used.

Cd&
0
SSupremeCommented:
How do you want it to be align?
0
Brad BansnerWeb DeveloperAuthor Commented:
I want it to fit the screen left-to-right, so alignment doesn't really matter. I don't want it to surpass the width of the screen. I swear I have used this exact same technique many other times, I don't see why the interior container, with a clear:both, will not stretch the wrapper container.
0
COBOLdinosaurCommented:
AHA... you are looking at in IE in quirksmode.  It stretches across perfectly in FF and in IE9 with a strict doc type like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Open in new window



Cd&
0
SSupremeCommented:
you can use something like this to fit the screen:
max-width: 1900px;
min-width:500px;
width:100%;

from should be  width:100% as well.
0
Brad BansnerWeb DeveloperAuthor Commented:
The only way I could solve this was with Javascript:

$('#membertablewrapper').height($('#membertable').height());

...on OnReady. It is correct, when I was talking about "clear:both" that only works with float, not with position:absolute. I was confused there.

Thanks all for your input, and sorry for the delay (was out last week).
0
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
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.