Center div inside div…

1

My first time posting in this section of the forum :slight_smile: I’m really new to CSS/HTML and I’m working on a page that shows before and after examples of images. I decided to use jQuery to get a nice hover fade effect on the images. I had everything nicely centered before I changed the design to incorporate jQuery and now I can’t figure out why I can’t center the div holding the images. All the properties of display, float, position, etc are all so confusing.

So, what I’d like to be able to do is center the “fadehover” div inside the “post” div and I would be immensely grateful if someone could point out the reason why I can’t seem to do this. At this point the only way I seem to be able to move the fadehover div is with a left property of 80px. Maybe I need to be trying to center “img.a” and “img.b”??

I don’t know if it’s necessary, but I thought I’d make note that all the images have different widths, but are the same height.

Thanks for any help. :slight_smile:

CSS


* {
    margin: 0;
    padding: 0;
}

body {text-align: center; font-size: 62.5%; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial,
"Lucida Grande", sans-serif; font-weight: 300; background-color: #FFFFFF;}
img{border: 0px;}
.clear {clear:both;}

#wrap {position: relative; margin: 0 auto; text-align: left; width: 700px; }
#header {float: left; width: 565px; height: 187px; margin-top: 5px; z-index: 1;}
#home {float:right; width:14px; margin: 10px 10px 0 0;}

#content {width:700px; padding: 115px 0 0 0; z-index: 10;}
.post {position: relative; width: 680px; height: 320px; margin: 10px 10px 20px 10px; padding:0 0 10px 0; border-bottom: 1px solid #f2f2f2;}
.post p {position: absolute; bottom: 3px; float: left; font-size: 8.5px;}

/*HOVER DIV*/
div.fadehover { position: absolute; left: 80px;}

/*HOVER IMAGE*/
img.a { position: absolute; z-index: 10; }
img.b { position: absolute; }

HTML


<body>
    
<div id="wrap">
    
    <div id="home">
        <a href="#"><img src="assets/home.jpg" alt="home" title="dot.com"></img></a>
    </div>    
    <div id="header">
        <img src="assets/header3.jpg" alt="Retouch" title="Retouch">
    </div>
    
    <div id="content">
        
        <div class="post">    
            <div class="fadehover">
                <img src="images/r_ravens.jpg" alt="" class="a" />
                <img src="images/ravens.jpg" alt="" class="b" />
            </div>
            <p>Ravens // Personal Work // Photoshop</p>    
        </div>
        <div class="post">
            <div class="fadehover">
                <img src="images/r_OG.jpg" alt="" class="a" />
                <img src="images/OG.jpg" alt="" class="b" />
            </div>
            <p>Bill // Personal Work // Photoshop</p>        
        </div>
        
    </div> <!--END CONTENT-->
        
</div> <!--END WRAP-->        


</body>