CODEWITHSUNDEEP
csshtml
Alex
Alex

Reputation: 2072

CSS one image out of 5 not aligned as the rest

I have 4 smaller (320x312 px) images and one larger rectangular image (541x602 px). My goal is to place 2 smaller images on each side of the larger one. The 3 smaller are places as i need, but the last one (lower left corner) is totally out of place, located way lower than needed. The code is exactly the same and i cant lift it with padding. I created an illustration.

Demo here: http://jsfiddle.net/QWStS/

enter image description here

I need the purple shape to be under the black, and aligned with the blue to its right.

this is the code:

HTML5

<div class="container">
     <div class="box-image">
         <img src="1.png">
     </div>

     <div class="box-image">
         <img src="3.png">
     </div>

     <div class="box-image">
         <img src="4.png">
     </div>

     <div class="box-image">
         <img src="5.png">
     </div>

     <div class="box-image">
         <img src="2.png">
     </div>
 </div>

CSS:

.container {
    padding-top: 20px;
    width: 1200px;
    margin:0 auto;
}

.container .box-image {
    float: left;
}

Upvotes: 0

Views: 93

Answers (2)

NSDCars5
NSDCars5

Reputation: 131

Alternatively, try this: http://codepen.io/anon/pen/Btqup

Does not require floats, and would be quite flexible if I hadn't used pixels to measure.

Explanation: There are three columns (div.large). In the first and third column, there are small boxes (div.smallbox) that are half the width, minus a little for padding. The code is pretty self-explanatory, though - check it out.

Upvotes: 1

Ka0ru
Ka0ru

Reputation: 21

maybe you should create 3 columns : in the first column you can put two small images, in the second put the large image and finally, put two small images in the last column. Then, apply a width and float: left on each column.

Be careful, the total width of the three columns must be lower than your container's width.

Upvotes: 1

Related Questions