Stacking DIV's on top of each other - most fluid way

I am wondering what is the best method to stacking DIV's on top of each other. I have read some info on some forums about it, but nothing really helped. My HTML looks like:

<img src="images/card.png" alt="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" title="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" width="779" height="507" border="0" class="top_layer" />
            
            <div class="bottom_layer">
                  <p>Here is my content.</p>
            </div>

i have my page being centered using margin:0 auto; and am not sure on how I can get it right behind the other one.

Thoughts?

Thank you in advance,

Ryan
img.top_layer{
	z-index:1;
}
div.bottom_layer{
	z-index:0;
	background-image:url(images/card-info.png);
	background-repeat:no-repeat;
	height:465px;
	width:709px;	
}

Open in new window

LVL 1
catonthecouchproductionsAsked:
Who is Participating?
 
David S.Commented:
Sorry. I should have been more specific. Auto margins don't work in absolutely positioned elements, so you need to use the first technique shown on that page.

Try this:

div.top_layer {
  left: 50%;
  margin-left: -385px;
  position: absolute;
  text-align: left;
  width: 779px;
  z-index: 2;
}
div.bottom_layer {
  background-image: url(../images/card-info.png);
  background-repeat: no-repeat;
  border: 1px solid red;
  height: 420px;
  margin: 0 auto;
  padding: 40px;
  width: 640px;
  z-index: 1;
}

Open in new window

0
 
David S.Commented:
z-index only applies to positioned elements.  One of them needs to be absolutely positioned and the other need to be also or have position:relative.

P.S. Are you sure that you're using the alt attribute appropriately? Does it really say that in the image?
0
 
catonthecouchproductionsAuthor Commented:
So in the long run, it does need absolute? Yeah, my image does say that, haha.. thank you! :)

What should I do because wont it appear different on different browsers because of resolution?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
David S.Commented:
While the ways to center non-absolutely positioned elements are better, there is a way to center an absolutely positioned element. For more information see: http://www.dynamicsitesolutions.com/css/center-element/
0
 
catonthecouchproductionsAuthor Commented:
I took a look at the earlier, then came back read it again and worked it in to my code, but my image doesn't seem like it is in the center, the front image that is. My css for it is:

div.top_layer{
      position:absolute;
      width:779px;
        margin-left: auto;
       margin-right: auto;
       text-align: left;
      z-index:1;
}

And HTML:

      <div class="top_layer">
                  <img src="images/card.png" alt="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" title="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" width="779" height="507" border="0" />
            </div>
            
            <div class="bottom_layer">
                  <p>This is the kind of stuff I like to do.</p>
            </div>

You can go to ryancoughlin.com to check it out for a live example, also I am in FF 3.0/Mac Leopard

Thank you for your help.

Ryan
0
 
catonthecouchproductionsAuthor Commented:
Nice! So this "should" center it 50% absolutely?

Thanks again!

Ryan
0
 
David S.Commented:
You're welcome.

Yes, that's how to center absolutely positioned elements.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.