html - Align two images side by side -
i want arrange 2 images in html
page side side.
- i want images stay side side if page size changes.
- 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
Post a Comment