How to keep two divs and images inside them to be side by side on browser resize?


Tags: javascript,jquery,html,css

Problem :

I have this JSFiddle: http://jsfiddle.net/ao9k1m20/4/

CSS:

.wrapper{
    width:470px; 
    float:left; 
    height:637px;
}
.container {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: left; border:5px solid #187BB7;
  background-size:auto; 
  height:610px;
}
#container1{
    background-image:url(http://i2.wp.com/theultralinx.com/wp-content/uploads/2015/02/tumblr_njxiyeoMUt1qkegsbo1_500.jpg?resize=450%2C610);
}
#container2{
    background-image:url(http://decoratedlife.com/wp-content/uploads/2013/05/pinterest-small-room.jpg);
}
img.info-icon{
  cursor: pointer;
  z-index: 1001;
  background-color:white;
}
#container1 .info-icon1{
  position: absolute;
  top: 250px;
  left: 250px;
}
#container1 .info-icon2{
  position: absolute;
  top: 100px;
  left: 100px;
}
#container1 .info-icon3{
  position: absolute;
  top: 300px;
  left: 80px;
}
#container2 .info-icon1{
  position: absolute;
  top: 250px;
  left: 250px;
}
#container2 .info-icon2{
  position: absolute;
  top: 100px;
  left: 100px;
}
#container2 .info-icon3{
  position: absolute;
  top: 300px;
  left: 80px;
}

HTML:

<div>
    <div class="wrapper">
        <!--Left Col-->
      <div class="container" id="container1">
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon1" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon2" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon3" data-target="pop5"  />
      </div>

        <!--Right Col-->
        <div class="container" id="container2">
            <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon1" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon2" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon3" data-target="pop5"  />
        </div>

    </div>
</div>

It has two float divs lined up together but when the browser is resized (not maximized or if it is being viewed in ipad/tablet) then the other div goes down. I want to show it side by side for comparison like after-before, with some pointer images which are when clicked shows a detail popup.

My question is how can i resize both of the divs in such a way they remain side by side and that the small pointers inside them are also resized and positioned correctly when the browser is resized or when the site is being viewed inside a tablet/ipad?

Please advice, thx!



Solution :

see if this suits your need. I apply the concept given here (http://www.mademyday.de/css-height-equals-width-with-pure-css.html) to keep the ratio.

http://jsfiddle.net/vleong2332/4Lft1qdy/2/

HTML changes

<div>
    <div class="wrapper">
        <!--Left Col-->
      <div class="container">
          <div class="inner_container" id="container1">
              .
              .
          </div>
      </div>

`

CSS changes

* {
    box-sizing: border-box;
}
.container {
  position: relative;
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
  text-align: left;
}
.container:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.inner_container {
    background-size:100% auto;
    background-repeat: no-repeat;
    border:5px solid #187BB7;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
img.info-icon{
  cursor: pointer;
  z-index: 1001;
  background-color:white;
  width: 7%;
}
#container1 .info-icon1{
  position: absolute;
  top: 65%;
  left: 70%;
}

According to that article, you insert a ::before pseudo-element inside the (outer) container that has 100% padding-top - this will push the height of the div to match the width in 1:1 ratio. the div that contains the image is then positioned absolutely to the left top corner. I hope the article makes sense.

As for the magnifying glass icons, I changed the positioning and the width to percentage so it adapts to the width of the image.


    CSS Howto..

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    Image rotation in IE causes automatic translation. How do I remove the translation?

    How to get background image/ image to stretch to fill container via CSS?

    How to override external css marked as !important? [closed]

    how to style simple_form with material design or custom css

    How do I increase the width and font-size of my twitter feed widget?

    How to align image and text for my html/css

    How can I force browsers to print background images in CSS?

    How to control child div height of a flex item

    How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width

    how to control the css rotation of an element inside a rotated element?

    How to manipulate SVG element style with javascript?

    How can I change the color CSS property of an element using jQuery

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

    How to use CSS 3d matrix to create a curved deformation effect

    CSS - How to change backgound colour for item avatar in ionicframework?

    How to make div block fixed as window size changes?

    How to create the corner that show in picture with css in webpage?

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    How to create circles around a circle with css, javascript?

    How to center text inside a div element? [duplicate]

    How can I truncate long texts in a table using CSS?

    How to show something only when user prints?

    How to force a list to be vertical using html css

    How to divide parent div's height between child divs

    How to replace a specific text in CSS? [duplicate]

    How do you choose when to use DIV and when SPAN, to wrap something?

    how to center background image in window resize

    How can I put CSS and HTML code in the same file?