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 to make one file compatible with different browsers?

    How to make an element match the height of a dynamic page

    How do I make a header above my navigation bar?

    How to align two text boxes on same line with CSS

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    How can I remove a parent with a certain child inside of it (media queries)

    How to have a different “placeholder style” and at the same time a different “text-input style” in Rails with CSS?

    How can I translate with webkit-transform enough so that

    How to apply alternate background color for each column in CSS columns

    How to change css pseudo-element through javascript?

    How to dynamically change pseudo-class value in css

    How to fix the css padding

    How to style LI to show quotes in a ticker

    How to check if an element matches the :empty pseudo-class in pure JS?

    How to clear the (CSS) visited history of an Android WebView?

    How can I show entered password using tooltip on input type=password in bootstrap?

    How to write css for a color when you only know the color in the RGB format [duplicate]

    Fontawesome: How to control height and width of stacked icons

    jQuery (or JS) - How to get only elements that are certain colour from an array?

    how to set size of canvas to its background image?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    How to change parent's CSS only when child is hovered?

    How to determine the 'toggle' status of a CSS toggle input?

    How to move an image up and down smoothly with CSS?

    How to overlap other elements using resizable element?

    site only shows half screen on mobile? Rest of screen is just body background?

    How to make a bullet list align with text in css?

    How to apply css background color to text only, in datatables cell

    How to make a box expand a distance from the sides

    How to inherit Image width and height to video tag