We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

relative positioned div not expanding parent div

mediatimebomb
on
Medium Priority
622 Views
Last Modified: 2012-06-21
Hi there,

I have a child div that is relatively positioned to it's parent div left 20 px and top 105 px
is it not possible to have the parent div automatically expand to contain or wrap the entire child div?

Does using relative positioning remove the child div from the document flow? is there a jquery fix or something to fix this if that is the case? Or do I just need to clear the child div or something like that please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
#page-content-wrapper {
	background-color:#0F0;
	width: 975px;
 
}
#page-content {
	background-color:#eee;
	width: 935px;
	position: relative;
	left:20px;
	top:105px;
}
-->
</style>
</head>
<body>
<div id="page-content-wrapper"> start page-content-wrapper
  <div id="page-content"> Start page content<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    End page-content<br />
  </div>
  <div style='clear:both;'>
</div>
 
  end page-content-wrapper </div>
</body>
</html>

Open in new window

whatsUpDiv.png
Comment
Watch Question

Britt ThompsonSr. Systems Engineer
Top Expert 2009

Commented:
If you want it to clear to the bottom of the content you should use margins in the content instead of static positioning:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
#page-content-wrapper {
        background-color:#0F0;
        width: 975px;
}
#page-content {
        background-color:#eee;
        width: 935px;
        position: relative;
		margin:105px 0 0 20px;
}
-->
</style>
</head>
<body>
<div id="page-content-wrapper"> start page-content-wrapper
  <div id="page-content"> Start page content<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    End page-content<br />
  </div>
  <div style='clear:both;'></div>
 
  end page-content-wrapper </div>
</body>
</html>

Open in new window

Commented:
<div style="clear:both
#page-content-wrapper {
	background-color:#0F0;
	width: 975px;
         clear:both

Open in new window

Commented:
Excuse that last comment.
Possible you may find the answer here.  
 
I see your. clear:both now

 
 

http://www.positioniseverything.net/easyclearing.html 

Open in new window

Author

Commented:
I know you can do this with margins but can you not do it with relative positioning?
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
that will do It thanks for you help
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.