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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute position divs expanding parent

    Hello,
    This is my first time posting here. I'm trying to learn CSS and am trying to get absolute positioned divs to expand their relatively positioned parent div. For instance in the image I have attached, I have three level of divs.

    The Red boxes are my absolute positioned divs. They contain my navigation system of text that may become enlarged.
    Their parent div is the Green (TopNavDiv) which is position:relative. It is there to allow me to use absolute position to place my navigation system.
    The Black (TopNavContainerDiv) is the overall container div that has a vertically repeating background that I would like to see repeated no matter how large the text gets and how.

    The problem is that the Green and Black divs don't encompass the red absolute positioned divs. The background is nonexistent because the div with that background isn't being pushed and expanded by the Red absolute positioned divs. If I place a spacer image in there or set the height then the background is there. But I can't set the height because I want the height determined by the absolute positioned divs.

    How do I fix this? Thanks in advance!

    http://www.schnacky.com/divhelp.gif

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    hi schnacky,
    Well that's the problem with absolute positioning and is why it isn't often used for laying out the main building blocks. There are techniques to clear absolutely positioned elements, but I think they all depend on javascript.

    Instead, I think you should look for an alternative layout. Why do you want to use absolute positioning for your menu? Wouldn't the div expand if you didn't use positioning?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello schnacky,
    I almost never use absolute positioning. Well, I goto great lengths to avoid it and only use it as a very last resort.
    See if this does what you want:
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrap {
    	width: 490px;
    	margin: 100px auto 0 auto;
    	border: 4px solid #000;
    	padding: 5px 0 100px 0;
    }
    #inner_wrap {
    	width: 450px;
    	margin: 10px auto 0 auto;
    	border: 4px solid #00FF00;
    	overflow: hidden;
    	padding: 2px;
    }
    .box {
    	width: 65px;
    	height: 45px;/*just a size to hold it. Remove later if you want.*/
    	float: left;
    	border: 4px solid #CC0000;
    	margin: 0 2px 0 0;
    }	
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="inner_wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </div>
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! It's nice to know I wasn't missing anything at least.


  •  

    Posting Permissions

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