2

How do I get these pictures side by side with css I cant get it to work. I tried everything but nothing is working for me and I cant find a tutorial for what I need on the web pls help me. and it has to be responsive.

HTML:

<div class="seizoenen">
    <div class="container">
        <img src="image/zomer.jpg" height="100%" width="25%" />
    </div>
    <div class="container">
        <img src="image/herfst.jpg" height="100%" width="25%" />
    </div>
    <div class="container">
        <img src="image/winter.jpg" height="100%" width="25%" />
    </div>
    <div class="container">
        <img src="image/lente.jpg" height="100%" width="25%" />
    </div>
</div>

Here is a JSFiddle.

Bart Bussel
  • 176
  • 1
  • 2
  • 12
  • Possible duplicate of [CSS - center two images in css side by side](http://stackoverflow.com/questions/11819417/css-center-two-images-in-css-side-by-side) – Brandon White Nov 22 '15 at 01:36

2 Answers2

0

Hoi bart, its quite easy to do. Your container needs to be display: inline-block; this will place the images next to eachother. And to fill the space of the images make them width: 100%;

Right fiddle now

One thing wasn't really clear to me you want the images to scale to a smaller size aswell?

C.Schubert
  • 2,034
  • 16
  • 20
  • It doesnt work for me I just cant get it to work :( there also has to be text over the images I just cant get it working – Bart Bussel Nov 22 '15 at 02:08
0

https://jsfiddle.net/bs3fz70v/2/

if you want it to be responsive...

  • Change img tags to max-width and set this in CSS. This will scale image down once it hits smaller screens.
  • Focus on your parent and child element structure. Your .container width should be set to 25%, not your img tag.
  • You mentioned text overlay in your comment. Set .container (parent element) to position: relative; Set any tag (child element) within that .container to position: absolute;. Now you can set top or left any value within 100% and contain it within that .container. And since the img tag is max-width:100%;, it will take on full width of that container, which is 25%.
  • Also set height to auto so images aren't stretched.

CSS

.seizoenen{
    width:100%;
}
p { 
    position: absolute;
    top: 50%;
    left: 50%;
}
.container{
    display: inline-block;
    width: 24%;
    position: relative;
}
img{
   max-width: 100%; 
}

Hope this gets you started experimenting with more positioning

Ryan Boyd
  • 193
  • 3
  • 13