3

I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.

I'm trying to make something like that: concept design

The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.

What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...

I also have some weird margin between my images... Can you help me delete them as well?

So my code is via this link: http://codepen.io/anon/pen/MygaEB

Someone (Giovanni Perillo) suggested me to have this Javascript code: 

var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");

var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;

if (height1 > height2) {
     div2.style.height = height1;
}
else {
     div1.style.height = height2;
}

The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.

EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.

EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.

enter image description here

  • 2
    Possible duplicate of [How do I keep two divs that are side by side the same height?](http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) – Adam Konieska Mar 04 '16 at 19:56

2 Answers2

0

Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.

Here is the updated codepen.

Update:

To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.

Anthony
  • 1,439
  • 1
  • 19
  • 36
  • When resizing the screen, the images are not respecting the original ratio. This idea is good, but need a lot of breakpoint with media queries. I need something that can change image width dynamically to get the same div height. Not sure if it's possible. –  Mar 04 '16 at 23:06
  • It is possible. Check out the Update section in my answer and the updated codepen. – Anthony Mar 07 '16 at 14:16
0

divs are block elements. you can set display:inline-block; to make them align side by side.

Leo The Four
  • 699
  • 9
  • 14