CODEWITHSUNDEEP
htmlcss
CBC_NS
CBC_NS

Reputation: 1957

Having an issue with div appearing below another

I have two divs. First acts as a banner of sorts. The next is just a small div that I'm trying to place directly below the first div. I've tried taking away float and adding clear: both. Perhaps I'm missing something? Below is my html and css

<div id="background">
</div>
<div id="us">
</div>

#background 
{
    width:  100%; 
    height: 10%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    border:1px solid #000;
    background-color:black;
    background-image: url(resources/images/****.png);
    background-repeat: no-repeat;
    background-position: center;
    clear: both;
}
#us
{
    display: block;
    width: 165px;
    height: 200px;
    left: 0px;
    align-top: auto;
    position: absolute; 
    background-image: url(resources/images/*****.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

The first div does appear at the top of the page and displays correctly. The second one appears over top of the first div. Any advice?

Upvotes: 0

Views: 70

Answers (3)

Harry
Harry

Reputation: 1

You have used position: absolute; in CSS of second div(#us) that's why it is showing on top of first div. Change that to position: relative; or delete that line.
And you are ready to go.

Upvotes: 0

Harry
Harry

Reputation: 1

try this one

#us
{display: block;
    width: 165px;
    height: 200px;
    left: 0px;
    align-top: auto;
    **margin-top: 50px;**
    background-image: url(resources/images/*****.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

Upvotes: 0

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Check this out.

Fiddle

Just add top:10%; to your #us because you are using position:absolute. The size of your top in #us must be the same size with your height in #background. I also added box-sizing:border-box; for you borders not to take space.

Upvotes: 1

Related Questions