Position Absolute causing problems

[Krewe]

I am trying to get the design of my homepage finished, however I am having some trouble getting the background color of a content div to flow passed a div. Html:

[/font][/color]<div id="container">	<div id="content">		<div id="headerInfo">			<div class="leftLocation">				<p>golden, co</p>			</div>			<div class="rightInfo">				<span class="text">					<a href="about.php">about us</a>					<a href="contact.php">contact</a>					<span class="phone">XXX-XXX-XXXX</span>				</span>			</div>			<div class="rightPic">				<img src="images/facebook.png" alt="facebook" title="facebook" />				<img src="images/yelp.png" alt="yelp" title="yelp" />			</div>			<div class="clear"></div>		</div>		<div id="homeHead">			<img class="logo" src="images/logo.png" alt="logo" />			<img class="paintSplash" src="images/paintSplash.png" alt="paint" />			<span id="nav">				<a href="classes">classes</a>				<a href="classes">calendar</a>				<a href="classes">gallery</a>				<a href="classes">FAQ</a>				<a href="classes">private events</a>				<a href="classes">large-scale</a>			</span>			<span id="word">				...Paint			</span>				<img src="images/homeSlide1.png" class="pic1" alt="pic1"/>				<img src="images/homeSlide4.png" class="pic1" alt="pic2"/>				<img src="images/homeSlide7.png" class="pic1" alt="pic3"/>[/font][/color][color=#000000][font=Arial,]				<img src="images/homeSlide2.png" class="pic2" alt="pic4"/>				<img src="images/homeSlide5.png" class="pic2" alt="pic5"/>				<img src="images/homeSlide8.png" class="pic2" alt="pic6"/>[/font][/color][color=#000000][font=Arial,]				<img src="images/homeSlide3.png" class="pic3" alt="pic7"/>				<img src="images/homeSlide6.png" class="pic3" alt="pic8"/>				<img src="images/homeSlide9.png" class="pic3" alt="pic9"/>			<div id="step1">				<span class="easy">Easy as</span>				<span class="part">Sign Up</span>				<span class="num">1.</span>				<p style="padding-bottom:5px;">Pick your favorite class and <a href="#">REGISTER ONLINE</a>.</p>				<p class="bottom"><a href="#">Classes</a> Starting at only $25!</p>			</div>			<div id="step2">				<span class="part">Show Up</span>				<span class="num">2.</span>				<p style="padding-bottom:5px;">We supply everything! Check out the <a href="#">FAQ</a>.</p>				<p class="bottom">Limited Seating, <a href="#">Register Now!</a></p>			</div>			<div id="step3">				<span class="part2">Enjoy!</span>				<span class="num2">3.</span>				<img class="wine" src="images/wine.png" alt="wine" />				<p style="padding-bottom:10px;">Sip your drink, paint, play & have fun.</p>				<p class="bottom">See our <a href="#">Gallery</a> for results!</p>			</div>		</div><!--End Header Info -->		<div id="bodyInfo">			<div id="left">				<p>					<span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website!				</p>				<p id="midLeft">					<span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes • Open Studio Times • Private Parties • Corporate Team-Builds • Charity Events				</p>				<p>					Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play!				</p>			</div>			<div id="right">			</div>		</div><!-- End bodyInfo -->	</div></div>

CSS:

[/font][/color]#container{width:100%;height:100%;}#content{width:900px;height:100%;margin:0px auto;background-color:#FFF;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}/*Header Info*/#headerInfo{position: relative;}.leftLocation{float:left;font-family: HelveticaNeueStd;font-size:14px;color:#4d2c0d;height:30px;margin-top:10px;}.leftLocation p{padding-right:5px;}.rightInfo{position: relative;float:right;width:360px;}.rightInfo a{color:#3397bf;text-decoration: none;font-size:14px;font-family: HelveticaNeueStd;padding-right:10px;}.rightInfo a:hover{color:#e11b6b;}span.text{position:absolute;top:-7px;}span.phone{font-family: Lavanderia;font-size:30px;color:#4d2c0d;}.rightPic{position: absolute;right:0px;}/*Home Head*/#homeHead{background-image:url('../images/homeHead.png');width:900px;height:573px;position:relative;clear: both;}.logo{position: absolute;top:-30px;left:10px;}.paintSplash{position: absolute;left:350px;top:-35px;height:105px;}#nav{position: absolute;left:245px;top:70px;}#nav a{color:#FFF;font-size: 16px;font-family: HelveticaNeueStd;padding-right:10px;text-decoration: none;}#nav a:hover{color:#e11b6b;}#word{position: absolute;top:90px;left:235px;padding:10px;color:#3397bf;font-family: Lavanderia;font-size:35px;}#pic1{[/font][/color][color=#000000][font=Arial,]}.pic1{position:absolute;top:249px;left:160px;width:140px;height:174px;}#pic2{transform: rotate(7deg);-ms-transform: rotate(7deg); /* IE 9 */-webkit-transform: rotate(7deg); /* Safari and Chrome */-o-transform: rotate(7deg); /* Opera */-moz-transform: rotate(7deg); /* Firefox */}.pic2{position:absolute;top:263px;left:424px;width:102px;height:150px;transform: rotate(7deg);-ms-transform: rotate(7deg); /* IE 9 */-webkit-transform: rotate(7deg); /* Safari and Chrome */-o-transform: rotate(7deg); /* Opera */-moz-transform: rotate(7deg); /* Firefox */}#pic3{transform: rotate(-13deg);-ms-transform: rotate(-13deg); /* IE 9 */-webkit-transform: rotate(-13deg); /* Safari and Chrome */-o-transform: rotate(-13deg); /* Opera */-moz-transform: rotate(-13deg); /* Firefox */}.pic3{position:absolute;top:252px;left:641px;width:121px;height:173px;transform: rotate(-13deg);-ms-transform: rotate(-13deg); /* IE 9 */-webkit-transform: rotate(-13deg); /* Safari and Chrome */-o-transform: rotate(-13deg); /* Opera */-moz-transform: rotate(-13deg); /* Firefox */}#step1{position:absolute;font-family: Helvetica;top:500px;left:100px;width:200px;height:60px;padding:15px;text-align: center;background-color:#f0deba;-webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;		box-shadow: 0 8px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}#step1 a{color:#e11b6b;}.bottom{font-family: HelveticaNeueStd-Italic;color:#3397bf;}.bottom a{color:#e11b6b;}.easy{font-family: Helvetica;font-size:14px;position: absolute;color:#FFF;top:-25px;left:-30px;}.num{font-family: HelveticaNeueStd;font-size:45px;color:#FFF;position: absolute;top:-45px;left:20px;}.part{font-family: Lavanderia;color:#FFF;font-size:40px;position: absolute;top:-45px;left:60px;}.num2{font-family: HelveticaNeueStd;font-size:45px;color:#FFF;position: absolute;top:-45px;left:60px;}.part2{font-family: Lavanderia;color:#FFF;font-size:40px;position: absolute;top:-45px;left:100px;}#step2{position:absolute;font-family: Helvetica;top:500px;left:345px;width:200px;height:60px;padding:15px;text-align: center;background-color:#f0deba;-webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;		box-shadow: 0 8px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}#step2 a{color:#e11b6b;}#step3{position:absolute;font-family: Helvetica;top:500px;left:590px;width:200px;height:60px;padding:10px;padding-bottom:20px;padding-left:50px;text-align: center;background-color:#f0deba;-webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;		box-shadow: 0 8px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}#step3 a{color:#e11b6b;}.wine{position:absolute;top:-30px;left:5px;}/*bodyInfo*/#holder{width:900px;height:573px;}#bodyInfo{width:100%;}#left{width:450px;float:left;}#right{width:450px;float:left;}

Everything is wrapped in the container and content div so I thought as I add content after the homeHead the white background would just expand down as usual... not the case it just stays there. (Look at screenshot) If anyone has an idea to fix this I would be grateful!Now I know absolute doesn't affect the dynamic height of its parent container, relative does, but is there anyway I can get this to work with position absolute? Thanks everyone!~Krewe

Edited September 12, 2012 by Krewe

[Krewe]

I asked this question on stack and someone kept telling me I need to switch to relative if I want the content to dynamically change its height... I'd rather not do that because then it changes the positioning (Since it's not relative to the parent element). So if there is a fix I'd be really grateful. Note: the homeHead has a fixed height, it is NOT DYNAMIC if that helps at all.

[Ingolme]

Absolute positioning always causes problems. It's probably best if you re-think your design. There's no way to get a page to be pixel-perfect in every browser, which is why you need to make designs fluid and flexible, allowing elements to interact between eachother.

[Krewe]

Absolute positioning always causes problems. It's probably best if you re-think your design. There's no way to get a page to be pixel-perfect in every browser, which is why you need to make designs fluid and flexible, allowing elements to interact between eachother.

I know, this is for a client of the place I'm doing an internship for. The client had a graphic designer design the website before coming to us, and there is a lot of overlapping causing the need for absolute... I usually never use it, but saw the need here. I'll try my luck with relative, hopefully it works. Edited September 13, 2012 by Krewe