CODEWITHSUNDEEP
csshtmlpositionline
ridermansb
ridermansb

Reputation: 11059

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: Should be result

Upvotes: 1

Views: 1010

Answers (2)

anothershrubery
anothershrubery

Reputation: 21003

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

Upvotes: 1

jeroen
jeroen

Reputation: 91744

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?

Upvotes: 2

Related Questions