Solved

relative positioned div not expanding parent div

Posted on 2009-07-07
6
543 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
0
Comment
Question by:mediatimebomb
  • 3
  • 2
6 Comments
 
LVL 30

Expert Comment

by:renazonse
ID: 24792887
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

0
 
LVL 17

Expert Comment

by:selvol
ID: 24792891
<div style="clear:both
#page-content-wrapper {

	background-color:#0F0;

	width: 975px;

         clear:both

Open in new window

0
 
LVL 17

Expert Comment

by:selvol
ID: 24792912
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

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:mediatimebomb
ID: 24809642
I know you can do this with margins but can you not do it with relative positioning?
0
 
LVL 17

Accepted Solution

by:
selvol earned 125 total points
ID: 24809958

Maybe I am miss-interpreting..
I apologize.&nbsp; You want the content wrapper to inconpass the child. And for the wrapper to expand and shrink as needed? Correct.
I apoligize.


<html>

 <!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;

           z-index: 2;

            position: absolute;

             margin:0 auto;

              padding:20;

               clear:both;

                 }

                  #page-content {

                   background-color:#eee;

                    width: 935px;

                     position: inherit;

                      left:20px;

                       top:105px;

                        z-index: 2;

                         }

                         #page-content-wrapper2 {

                        background-color:#0F0;

                       width: 955px;

                      z-index: 22;

                     position: absolute;

                    margin:144 auto;

                   padding:20;

                  clear:both;
 

                }

               #page-content2 {

              background-color:#eee;

             width: 935px;

            position: inherit;

           left:20px;

          top:105px;

         z-index: 22;

        }

       body {

      font-size: 12px;

     font-family: Arial, Tahoma, Verdana, Sans-Serif;

    background-color:#ff7900;

   color:#333333;

  padding:0;

 margin:0;

 }

  #contents #contents-body p{margin-top:10px;}

   -->

   </style>

                                 </head>

                                <body>

                               <div id="page-content-wrapper"> start page-content-w

                              <div id="page-content"> Start page content<br />a

                             <br />

                            <br />

                           <br />

                          <br />

                         <br />

             content

              content

               content

                content

                 content

                  content

                   content

                    content

                     content

                      content

              content

              content

              content

              content

                      content

                     content

                    content

                   End page-content<br />

                  End page-content<br />

                 End page-content<br />

                End page-content<br />

               End page-content<br />

              End page-content<br />

             End page-content<br />

            End page-content<br />

           End page-content<br />

          End page-content<br />

         End page-content<br />

        End page-content<br />

      <div>

     <br><br><br><br><br><br><br><br><br><br><br>

      <!--point Comment--><div id="page-content-wrapper2"> start page-content-wrapper

       <div id="page-content2"> Start page             <br><br><br><br><br><br><br><br><br><br><br>

        <br />

         <br />

          <br />

           <br />

            <br />

             content

              content

               content

                content

                 content

                  content

                   content

                    content

                     content

                      content

                       content

                        content

                         content

                         content

                        content

                       content

                      content

                     End page-content<br />

                    End page-content<br />

                   End page-content<br />

                  End page-content<br />

                 End page-content<br />

                End page-content<br />

               End page-content<br />

              End page-content<br />

             End page-content<br />

            End page-content<br />

           End page-content<br />

          End page-content<br />

         End page-content<br />

        <div>

       </div>

      end page-content-wrapper </div></div><br>

     </body>

    </html>

   

 

Open in new window

0
 

Author Closing Comment

by:mediatimebomb
ID: 31600513
that will do It thanks for you help
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now