Search code examples
htmlcss

how to place two divs side by side

How can I place 2 divs side by side, both which have images. I want the divs to remain side by side and the images auto size ,with screen size.When I reduce the size of the screen the images re-position themselves one below the other. How will be the css for the below html?

<div class="container">
  <div class="wrapper">
    <div class="left">
      <img src="img1.png" />
    </div>
    <div class="right">
      <img src="img2.png" />
    </div>
  </div>
</div>
Solution

  • Try using bootstrap grid's. It can be something like this.

    <div class="col-sm-12">
    <div class="col-sm-6">
        <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
    </div>
    <div class="col-sm-6">
        <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">      
    </div>
</div>

    Demo