CSS - overlapping - valid

Question

Is there a valid way to overlap 2 divs.

I have the following, but am unable to make them overlap.

#top-border{width:100%; height:60px; background:url(image.jpg) 0 0 repeat-x; float:left; position:relative;}
#header-wrap{width:100%; height:80px; background:none; float:left;}
#header{width:800px; margin:0 auto; height:80px; background:url(taller-image.jpg) 0 0 repeat-x}



<div id="top-border"></div>
<div id="header-wrap">
     <div id="header">links go here.</div>
</div>

This essentially gives the effect that the top banner is "popped" out but am unable to get them to overlap...

as seen here at the top of the image: http://www.boguscreek.com/images/template.jpg

FatherStorm · Accepted Answer · 2010-11-08 22:24:05Z

1

position:relative;left:-30px will move element2 30 pixels over element 1

<style>
    #div1{
        width:100px; height:100px;
        border:1px solid red;
        float:left;
}

#div2{
    width:100px; height:100px;
    border:1px solid blue;
    float:left;
    position:relative;
    left:-30px;

}

</style>

<div id="div1">1</div>
<div id="div2">2</div>

answered Nov 8, 2010 at 22:24

FatherStorm

7,1711 gold badge24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony noriega Over a year ago

I am trying to get this effect here at the top of the website: boguscreek.com/images/template.jpg

Alberto Martinez · Accepted Answer · 2010-11-09 00:34:46Z

0

The only thing similar to overlapping that I see in the image template are the brown bars, but you don't need to use overlapped <div>'s for doing that, just the image with the brown bars and the blue mosaic as the background image of <body> and put all the content inside of a <div>.

answered Nov 9, 2010 at 0:34

Alberto Martinez

2,6804 gold badges25 silver badges29 bronze badges

2 Comments

tony noriega Over a year ago

I am trying to avoide huge image files and would rather use smaller images with repeat-x.

Alberto Martinez Over a year ago

I assumed that, you still can use the method I described with tiled images.

Collectives™ on Stack Overflow

CSS - overlapping - valid

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related