Search code examples
csshtmlpositioning

making an inner div appear further from top

I'm trying to make the inner div appear further down the page, but it just sits at the top with what looks like the default margin of the outer div #top_middle

<div id="top_center">
   <div id="main_container"></div>
</div>

#top_middle
{
    padding: 0px;
    margin: 0px auto;
    width: 100%;
    position: relative;
    z-index: 99;
    top: 0px
}
#main_container
{
    width: 800px;
    display: block;
    background-color: #ddd093;
    margin: 0px auto;
    padding: 0px;
    height: 300px;
    top: 200px;
    z-index: 1;
}
Solution

  • You have to give position:absolute to this div. Since top value works with position (absolute, relative) only ...

    #main_container
    {
    width: 800px;
    display: block;
    background-color: #ddd093;
    margin: 0px auto;
    padding: 0px;
    height: 300px;
    top: 200px;
    z-index: 1;
    position:absolute
    }