Div forming a line inside another div

How do I create a div with width size: 1024px, height: 200px and another div inside starting position with size 990px ​​width: 20px, height: 200px forming a line.

I started to do but I'm not progressing:

Here is the 开发者_开发技巧code:

CSS:

div.wrap, div.header
{
    width:1024px;
    margin:0 auto;
}
div.header, header1
{
    height:100px;
    background-color:Purple;
}
div.header header1
{
    background-color:Gray;
    left:990px;
    position:fixed;
}

Html:

<div class="wrap">
<div class="header">
    <div class="header1"></div>
</div>
</div>

As should be the result:

Edit: Please note that you have a typo in your css, it should be .header1 instead of header1.

To answer your question:

div.wrap, div.header
{
    width:1024px;
    margin:0 auto;
    position: relative;    // added
}
div.header, .header1    // typo fixed, header1 is not a valid element
{
    height:100px;
    background-color:Purple;
}
div.header header1
{
    background-color:Gray;
    left:990px;
    position:absolute;    // changed
    width: 20px;    // added
}

However, can´t you just use the border property?

Something like this? http://jsfiddle.net/5ZuUZ/