html - Align two images side by side -


i want arrange 2 images in html page side side.

  1. i want images stay side side if page size changes.
  2. i want second image span entire header of page ie. space left after first image. images here of different size.

for now, have arranged 2 images side side, when change size of page, image wraps , comes in next line after first image.

here code sample , css:

.header {    display: inline-block;    margin-left: auto;    margin-right: auto;    height: 120px;  }
<img class="header" src="http://www.placehold.it/160x120" style="float: left;" alt="ccm logo">  <img class="header" src="http://www.placehold.it/543x120/0000ff" alt="ccm banner">

here fiddle.

use white-space: nowrap prevent wrapping.

.header {    margin: 0 auto; max-width: 800px; /*centering header*/      height: 120px; position: relative; /*scale header images 120px*/    white-space: nowrap; /*keep one-line*/    overflow: hidden; /*hide excess images parts on small screens*/  }  .header>img { height: 100%;}
     <body>    <div class="header">    <img src="http://www.www8-hp.com/in/en/images/t-ge-healthcare-logo__153x115--c-tcm188-1616301--ct-tcm188-1237012-32.jpg" alt="ccm logo">    <img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="ccm banner">    </div>  </body>


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -