Aligning, floating and centering images responsively

alignment, css, css-float, responsive-design

Solution

Running late for a meeting. But, if you take a look at

Code Pen: http://codepen.io/anon/pen/bazEr

.athena_thumbs {
    position: absolute;
    width: 90%;
    margin-left: 5%;  
    text-align: center;
    overflow: hidden;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    z-index: 3;
}

.athena_thumbs .second {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}

.athena_thumbs .third {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

I think this will get you going in the correct direction. There is nothing in the way of cross-browser checking. Just the basic according effect more or less in place.

Hope this helps.

Problem

I'm trying to figure out how to code my HTML & CSS to have the 3 screenshots images align up like in the screenshot below. The idea is when the user resizes the window smaller the images on the left and right should move in towards the center, or tighter behind the main image and the main image always stays centered. My Dev Link: http://leongaban.com/portfolio/athenasweb/ My CodePen http://codepen.io/leongaban/pen/AwJFt And tips or direction would be super appreciated! :D HTML ``` <div class="pattern"> <div class="athena_thumbs"> <div class="first"> <img src="../../images/athena1.jpg"/> </div> <div class="second"> <img src="../../images/athena2.jpg"/> </div> <div class="third"> <img src="../../images/athena3.jpg"/> </div> </div> </div> ``` CSS ``` div.inner .pattern { position: absolute; width: 100%; height: 100%; background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png'); background-repeat: repeat; z-index:2; } .athena_thumbs { position: absolute; max-width: 1000px; margin: 250px auto 0; } .athena_thumbs .first { position: relative; margin: 0 auto; float: left; left: 25%; right: 25%; z-index: 3; } .athena_thumbs .second { position: relative; float: left; left: 10%; right: 5%; z-index: 2; } .athena_thumbs .third { position: relative; float: left; right: 10%; left: 5%; z-index: 1; } ```

Original source