CODEWITHSUNDEEP
csshtml
Vanwaril
Vanwaril

Reputation: 7548

How do I center multiple "relative" divs with stacked images?

I want a set of divs stacked sideways, like so:

D0
---------------------------------------
|     ------ ------ ------ ------     |
|     |    | |    | |    | |    |     |
|     | D1 | | D2 | | D3 | | D4 |     |
|     |    | |    | |    | |    |     |
|     ------ ------ ------ ------     |
---------------------------------------

Centered within D1. I can do this by setting D0 to text-align:center. (I cannot use margin:auto, since I don't know the width of D1 - D4 combined).

However, D1 through D4 contain a bunch of images I want to overlay. I can do this by setting position: relative for D1, and position:absolute for the img tags.

The issue is that this causes D1-D4 to seem like they have no content, and they lose their ability to center with text-align:center! Is there some other way to achieve what I want?

Upvotes: 3

Views: 528

Answers (4)

Ankur Loriya
Ankur Loriya

Reputation: 3534

<div id=d0 style="">
    <center><div id="dgroup" style="padding-top:10%;">
        <div id=d1 style="float:left;width=100px;height:180px">
              this is d1
        </div>

        <div id=d2 style="float:left;width=100px;height:180px">
              this is d2
        </div>

        <div id=d3 style="float:left;width=100px;height:180px">
              this is d3
        </div>

    </div></center>
</div>

Upvotes: -1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Hey i think y may now as like this

Css

.d0{
    width:70%;
    background:green;
    text-align:center;
    margin:0 auto;
}

.d0 div{
    display:inline-block;
    margin:10px 0;
}

 .d1{
    background:yellow;
    position:relative;
}

 .d2{
    background:pink;
}


 .d3{
    background:darkred;
}


 .d4{
    background:lightblue;
}

HTML

<div class="d0">

    <div class="d1">D1</div>
    <div class="d2">D2</div>
    <div class="d3">D3</div>
    <div class="d4">D4</div>

</div>
​

Live demo http://jsfiddle.net/rohitazad/qCtwp/

--------------------------------------------------

or if you used table than http://jsfiddle.net/rohitazad/qCtwp/1/

Upvotes: 1

Sam
Sam

Reputation: 146

May you are using flot:left property to divs, remove that and u can use display:inline for divs then it will be in center of D0

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

use display : inline-block for d1, d2 d3 and d4 (along with a vertical-align) and use text-align: center on the parent

Relative positioning is not necessary for those elements

Upvotes: 3

Related Questions