CODEWITHSUNDEEP
htmlcss
user1240679
user1240679

Reputation: 6979

Stack the div elements over each other

I have a website in which the layout looks something like this: (image below)

enter image description here

On the left panel, I have a div which displays a logo. I have another div which I want to put beneath the logo and so divs these have to be these stacked over each other. I tried fiddling with the z-indexes, but didn't quite get the rquired thing. How can this be done?

Upvotes: 4

Views: 479

Answers (5)

morgi
morgi

Reputation: 1025

I'm not sure what you want to achieve but try this, adapting the values to your layout

Upvotes: 1

arttronics
arttronics

Reputation: 9955

Reference: jsFiddle Logo Demo

Status Update: jsFiddle Logo Demo Just Border Version

The above jsFiddle has extensive notes in the CSS Section so you can understand how to setup your specific Logo.

HTML:

<div id="logoHolder">
    <div id="logoContent">
      <div id="logoImage"></div>
    </div>
</div>

CSS:

#logoHolder {
    width: 296px;
    height: 296px;
    background-color: white;
    border: 3px solid red;
}

#logoContent {
    width: 256px;
    height: 256px;
    padding: 20px;
    position: relative;
    border: 1px solid black;
}

#logoImage {
    background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: aqua;
    height: 100%;
}

Upvotes: 2

Jigar Jain
Jigar Jain

Reputation: 1447

Try using the margin property, as shown in your image. If you put margin-left as a negative value for the right-side div, then the right-side div will move below/above the logo div.

Upvotes: 0

Derfder
Derfder

Reputation: 3324

Try to use also position: absolute; instead of relative for both elements when using z-index. Then it can make some distortion in your layout, so you can put the logo divs inside another relative div or use some other technique to fix it, however it must work when using position absolute and z-index. If it is still not working, check if some of your javascript is not interfering or if some other elements in your code have z-index, so it is causing the problems.

If using position absolute, do not forget to define margin-left and margin-top.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

If z-index is not working for you try nesting the logo <div> in a wrapper <div> something like this

<div> <!--div container to hold the logo div-->
 <div><!--Logo div--></div>
</div>

Upvotes: 2

Related Questions