Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute Positioned Blocks Contained within Relative Positioned Block

    As I understand it...

    * you can nest absolute positioned divs within a relative positioned container div
    * the container div itself will be inline with the rest of the document
    * therefore, the contents of the container div will not overlap the other parts of the document

    For example, suppose you wanted a main content section sandwiched between a header and footer. And suppose, the layout within the main content section contained absolute positioned divs. It seems like you could wrap the absolute positioned sections/divs in a relative positioned container to ensure they did not overlap the footer.

    But, when I do this with the code below, the text within the contained div overlaps the footer. Why is this not working as expected?

    Please note that I am not looking for the best way to achieve such a layout. I am just experimenting with divs and positioning - trying to learn the ropes - and am trying to figure out why they aren't working the way I thought.

    Here is the CSS...

    body {
    background: #0D4C7D;
    }

    #header {
    background: #FFFFFF;
    width: 100%;
    height: 150px;
    }

    #footer {
    background: #94C37A;
    width: 100%;
    height: 50px;
    }

    #container {
    position:relative;
    width: 100%;
    }

    #contained {
    position:absolute;
    }


    Here is the HTML

    <body>
    <div id="header">Header</div>
    <div id="container">
    <div id="contained">Absolute Positioned Contained Div</div>
    </div>
    <div id="footer">Footer</div>
    </body>

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    There's no need to position anything if you just want a content area sandwiched between a header and a footer.

    Try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    body {
    margin-bottom: 40px;
    }
    #wrapper {
    margin: 0 auto;
    margin-top: 15px;
    width: 700px;
    border: 1px solid #777;
    color: #444;
    background: #fff;
    }
    #header {
    border-bottom: 1px solid #777;
    padding: 1em;
    background: #ddd;
    }
    #content {
    padding: 15px;
    }
    #content p {
    margin-bottom: 20px; 
    }
    #content h2 {
    margin: 0 0 .5em 0;
    }
    #footer {
    clear: both;
    border-top: 1px solid #777;
    text-align: center;
    padding: 10px;
    background: #ddd;
    }
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="header"><h1>Header</h1></div>
    	
    <div id="content">
    	
    <h2>Content header</h2>
    	
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    	
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    	
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    
    </div>
    	
    <div id="footer"><p>Lorem ipsum dolor sit amet</p></div>
    
    </div>
    
    </body>
    </html>
    Last edited by Jutlander; 08-05-2007 at 12:06 AM. Reason: some superfluous code needed removing
    .
    .

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by amcalab View Post
    For example, suppose you wanted a main content section sandwiched between a header and footer. And suppose, the layout within the main content section contained absolute positioned divs. It seems like you could wrap the absolute positioned sections/divs in a relative positioned container to ensure they did not overlap the footer.
    This is not correct. An absolutely positioned element will under no circumstances expand its parent. This is the main problem with absolute positioning. Therefore absolute positioning of ones building blocks is rarely a good choice for doing the basic page layout.
    Edit: Simultaneous post


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •