CODEWITHSUNDEEP
htmlcss
manu vishwanath
manu vishwanath

Reputation: 107

How to overlap divs in html

hi i am trying to make simple website( i am Learning this). i created simple web site(Static ones). i wanted to try little up with dynamic with CSS. so tried this. I wanted them to over lap so that i can create nice file like looking like this

    _ ______  _ _______
   |N|De|N|De|N|Details|.....Etc
   |A|  |A|  |A|       |     
   |M|  |M|  |M|       |     
   |E|  |E|  |E|       |     
   |_|__|_|__|_|_______|

but it is looking like this

  _ _______  _ _______
   |N|Details||N|Details|.....Etc
   |A|       ||A|       |
   |M|       ||M|       |
   |E|       ||E|       |
   |_|_______||_|_______|

how to DO this the js fiddle link: http://jsfiddle.net/kdGCu/

Upvotes: 1

Views: 141

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157294

Well things are pretty messy in your CSS so lets do it the right way, I;ve made an example from scratch

Use a position: relative; container and wrap all the 3 divs and assign position: absolute;.

Now use top and left properties here to stack them...

Demo (Stack Up Demo)

Demo (Modified as per your needs)

Demo (Playing With z-index to reveal content on hover)

In CSS am using nth-of-type which means it will select nth type of an element, which in this case it's a div here

CSS

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>

.wrap {
    position: relative;
}

.wrap div {
    height: 300px;
    width: 300px;
    position: absolute;
}

.wrap div:nth-of-type(1) {
    background: #f00;
    top: 0;
    left: 0;
}

.wrap div:nth-of-type(2) {
    background: #00f;
    top: 0;
    left: 40px;
}

.wrap div:nth-of-type(3) {
    background: #0f0;
    top: 0;
    left: 80px;
}

Upvotes: 2

Al-Mothafar
Al-Mothafar

Reputation: 8219

Well, I think I understand issue now, and I think I found solution, you almost done but something missing, simply I added width for div.mainContainer>div and fixes your .Child class, you can find solution in update on your code : http://jsfiddle.net/kdGCu/2/

div.mainContainer>div {
    display:inline-block;
    float:left;
    position:relative;
    overflow:auto;
    width: 5em;
}

.Child {
    z-index:5;
}

I wish I helped you.

Upvotes: 1

specialscope
specialscope

Reputation: 4218

The idea is to use negative margin.

.Profiles {
    width:20em;
    height:300px;
    border: 2px solid black;
    border-radius:10px;
    left:1em;
    z-index:0;
    position:relative;
    margin-left:-20px;
}

See this jsfiddle.http://jsfiddle.net/harendra/kdGCu/3/

Upvotes: 0

Related Questions