CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2955412
user2955412

Reputation: 227

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

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!

Upvotes: 0

Views: 248

Answers (2)

Vicky Leong
Vicky Leong

Reputation: 1267

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.

Upvotes: 1

dbp
dbp

Reputation: 373

Something like this? http://jsfiddle.net/vecf7abj/21/

As mentioned above, this utilizes floats and widths percentages:

float:left;
width:50%;

Also cleaned up some other code to vertical align within that div.

Upvotes: 0

Related Questions