Relative Positioned Container Div Not Expanding to Absolutely Position

[g123s]

Hi,

I've positioned my container div relative. In the container, I then positioned my center content div absolute.

The problem: The container div is not expanding with the content div. You can see this because the content div is overlapping my footer which is clear: both.

You can check out my website: www.2teachreading.comyr.com

Thanks

[mrG]

Try making it static instead and using margin-left instead of left:



.container .content {
width: 640px;
position: static;
margin-left: 170px;
background-color: #6633CC;
}


Then move the "content" div to after the left and right sidebars:



<div class="contentwrapper">
<div class="rightnavbar">
<ul><li><a href="http://www.google.ca">Glycemic Index </a></li>
<li><a href="http://www.google.ca">Google</a></li>

</ul>
</div>
<div class="leftsidebar">

<img src="images/160x600.gif" />
</div>

<div class="content">
<h4>Helloafdafasf</h4>
[...]
<p>&nbsp;</p>
<p>&nbsp; </p>
</div>
</div>


See: http://g-prime.net/misc/2teachreading.html

[g123s]

Thanks for your efforts, but I have one more question. Why doesn't absolute positioning work? If I used the z-index would it work? Why is there space between the columns and header?

Also, I don't really want to change the order of the code, because, Google, always says that you should have your content at the top of the source code. I just want the content div to be under the header in the source code.

Oh yeah, mrG, are you a PHP developer? I need to hire one for my website, dinehere.ca

[g123s]

I'm not that good with CSS.