CSS Problem: positioned div problem...I want to die

Hello all,

I am trying to have a div be set to the height of it's containing div, that has an absolute location, it's not working. :(

CSS

#page_content_container{
width:100%;
background-color:#009966;
}

#page_content_column{
position:relative;
width:900px;
margin:auto;
background-color:#FF0000;
}

#detail_content_column_one{
position:absolute;
left:0;
width:550px;
padding-left:5px;
background-color:#00CC66;

}
/*for illustration purposes only*/
#detail_content_column_two{
width:550px;
padding-left:5px;
background-color:#00CC66;

}


HTML

<!--Example1-->
<div id="page_content_container">
<div id="page_content_column">
<div id="detail_content_column_one">
<div>
<p>I wanna cry</p>
<p>sadfasdfsd</p>
<p>asdfsda</p>
<p>asdf</p>
</div>
</div>
</div>
</div>
<!--End of example1-->
<div style="height:200px;"></div>
<!--Example 2-->
<div id="page_content_container">
<div id="page_content_column">
<div>
<p>I wanna cry</p>
<p>sadfasdfsd</p>
<p>asdfsda</p>
<p>asdf</p>
</div>
</div>
</div>
<!--End of example2-->
<div style="height:200px;"></div>
<!--Example 3-->
<div id="page_content_container">
<div id="page_content_column">
<div id="detail_content_column_two">
<div>
<p>I wanna cry</p>
<p>sadfasdfsd</p>
<p>asdfsda</p>
<p>asdf</p>
</div>
</div>
</div>
</div>
<!--End of example3-->



The Link: http://www.mooseblood.com/shoot.html shows

Example #1 shows the code with the absolute and relative block not working at all it doesn't have any colors behind it. (thus no expanding divs)

Example #2 shows the code with NO #detail_content_column_one (or absolute positioned div) and thus shows the 2 columns that should expand with #detail_content_column_one.

Example #3 shows the code with #detail_content_column_one (actually #detail_content_column_two) without being absolutely positioned, and thus, it working correctly.


I would LOVE any help with this, as I am coming to the end of my rope

I am a bit confused by this. Where exactly do you want the text to appear?

D.

Ay sorry, man, but there’s only one solution for your current problem: Scrap that thing and start from scratch. Sorry that I can’t give you better news but I see that you aren’t making it any better with proceeding like this. I mean you have not much code but what you have this is a huge mess already.

The first thing you need if you build a website is content. Real content. What is the purpose of your page/site? The reason I ask is because there are millions of apporaches to build a website and all depends on the content/structure. So to decide for the right way you need to make a plan what you are going to put on your website.

Then the most important keyword is semantics (http://brainstormsandraves.com/articles/semantics/structure/). That means that everything has (or should have) a meaning. If you have a website that doesn’t serve any purpose or doesn’t have any meaning it’s a useless website. The basic thought is: Don’t style the page, style the content. That means you need some content at first.

Then, after you know everything about semantic HTML (which also includes short and descriptive class names and IDs for elements) you know that you structure your page with the correct markup (and only use elements that are actually necessary), and then you use the elements you have there to style/position/whatever them. You don’t add elements just to add new styles - which includes not nesting numerous divs to achieve something.

This may all sound a little confusing at first but for example look at http://csszengarden.com to get an idea (or, without being bigheaded, view the source code of my small personal website (http://vipstephan.de) to see semantic code in action and what can be achieved with it).

And by the way: You may only use an ID once per document (page). For repeating sections use classes.

Hope that helps a little bit.