html - How to make 2 images on top of each other -


so i'm trying make 2 image on top of each other. 1 needs @ place 2. , number 3 it's (i added incase) know there answer out there how bad dont know how apply them.enter image description here

html <div class="container">         <div class="homelinks">             <div class="homelinks-big">                 <img src="img/link-big.jpg" width="450" height="325">             </div>             <div class="homelinks-small">                 <img src="img/link_basic.jpg" width="250" height="150">             </div>              <div class="homelinks-small">                 <img src="img/link_basic.jpg" width="250" height="150">             </div>           </div>     </div> css .homelinks {     margin-top: 2.5%; }  .homelinks-big {     float: left; }  .homelinks-small {     float: right;     margin-bottom: 2.5%; } 

you're floating both of .homelinks-small. default line next each other if have enough room. easy way around wrap them in container , float instead.

an unfortunate side effect of above method makes margin-bottom: 2.5% have different result compared original design. because top , bottom margins (and padding to, matter) use width of element, not height. way around use viewport units instead. in keeping width of screen used 2.5vw, vw means viewport width. translates 2.5% of width of window.

here used .homelinks-small-group container, vw margin, , changed images sized percentages see effect easier.

.homelinks {    margin-top: 2.5vw;  }  .homelinks-big {    width: 45%;    float: left;  }  .homelinks-small-group {    width: 25%;    float: right;  }  .homelinks-small {    margin-bottom: 2.5vw;  }  img {    width: 100%;  }
<div class="container">    <div class="homelinks">      <div class="homelinks-big">        <img src="http://lorempixel.com/450/325">      </div>      <div class=homelinks-small-group>        <div class="homelinks-small">          <img src="http://lorempixel.com/250/150">        </div>        <div class="homelinks-small">          <img src="http://lorempixel.com/250/150">        </div>      </div>    </div>  </div>

here's codepen well.


Comments