asked on

relative positioned div not expanding parent div

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

Britt Thompson

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

James Williams

<div style="clear:both

#page-content-wrapper {
	background-color:#0F0;
	width: 975px;
         clear:both

Open in new window

James Williams

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

mediatimebomb

ASKER

I know you can do this with margins but can you not do it with relative positioning?

ASKER CERTIFIED SOLUTION

James Williams

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mediatimebomb

ASKER

that will do It thanks for you help