Position several divs in one parent div

Question

I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.

Here is what my page should look like:

http://imageshack.us/photo/my-images/854/unbenanntgoc.png/

In my html I just define my divs:

<div id="content">

<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />

</div>

So navi image and tag content divs should float.

And this is how my css looks like:

@charset "utf-8";

body {
    background-color:#33FF00;
}

#header {
    height:100px;
    background-color:#FFFFFF;
    position:relative;
}

#naviContent {
    width:25%;
    background-color:#F0F;
    float:left;
}

#imageContent {
    background-color:#000;
    position:absolute;
    float:left;
    width:800px;
    height:600px;
}

#tagContent {
    background-color:#900;
    position:absolute;
    float:left;
    width: 25%;
}

#textContent {
    background-color:#0000FF;
    clear:both;
}

#content {
    height:1600px;  
    width:1200px;
    background-color:#999999;
    margin-left: auto; 
    margin-right: auto;
    padding:10px;
    position:relative;
}

So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?

Thanks in advance

Answer 1

You need to close the DIV properly -

<div id="content">

<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text  </div>

</div>

EDIT: Working Fiddle You need to adjust floated width and you are done!