CSS center layered dynamic divs

Question

This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.

so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:

<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>

Everything I have tried Hasn't worked out. how should I go about this?

The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:

#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}

Answer 1

If you mean the Title in the center use this way:

#title {
    margin: 0 auto;
    width: /* your width */
}

the position should be relative at the wrapper.

JsFiddle UP

I just reorganized the body structure, adding one more div and floating everything. Then inside the central section I added title and image that you can style to be centered to the relative div.

Answer 2

If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:

HTML

<div id="wrapper">
    <div id="title"><h2>Article Headline</h2></div>
    <div id="image"><img></div>
    <div id="leftbutton"><img></div>
    <div id="rightbutton"><img></div>
</div>​

CSS

​#wrapper {
    background:#6cb6d9;
    display:inline-block;
    position:relative;} 

#title {
    position:absolute;
    top:0;
    width:100%;
    text-align:center;}

#title h2 {
    background:green;
    color:white;
    padding:10px 15px 10px 15px;
    display:inline-block;
    max-width:200px}

#image {}

#image img {
    min-width:200px;
    height:300px;
    width:500px; }

#leftbutton {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:75px;
    background:black;}

#rightbutton {
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:75px;
    background:black;}

Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.

http://jsfiddle.net/b7c7c/

Answer 3

None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?

Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post