I can not post pictures from each other as in the photo enter image description here

So far, the only way out is HTML

<div id="header" > <div id="inner_wrap_logo"> <img src="img/sm.png" style="width: 178px; height: 280.6px; "> <img src="img/cross.png" style="width: 194px; height: 214px;"> </div> </div>

CSS

 #header{ position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); } #inner_wrap_logo{ margin: 0 auto; width: 960px; height: 100%; }

    3 answers 3

     #header { position: relative; width: 100%; height: 501px; background: url(http://conceptartworld.com/wp-content/uploads/2013/09/Tank_Concept_Art_by_Chad_Weatherford_01.jpg); } #inner_wrap_logo { position: relative; margin: 0; width: 100%; height: 100%; } 
     <div id="header"> <div id="inner_wrap_logo"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/CoA_of_Russian_Empire_(1730).png" style="width: 194px; height: 214px;"> <img src="http://abali.ru/wp-content/uploads/2011/08/korolevskiy_Royal_CoA_of_Norway.png" style="width: 194px; height: 214px;float:right;"> </div> </div>

    • #inner_wrap_logo need to set overflow: hidden; or clearfix - HamSter
    • @ElenaSemenchenko why? - C.Raf.T
    • Then, inside the floating block, the second image is img {float: right; } img {float: right; } - HamSter

    Option 1 flex:

     #header{ position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); } #inner_wrap_logo{ margin: 0 auto; width: 960px; height: 100%; display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; }

    Option 2 float:

     #header{ position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); } #inner_wrap_logo{ margin: 0 auto; width: 960px; height: 100%; overflow: hidden; } #inner_wrap_logo img:first-of-type{ float:left; } #inner_wrap_logo img:last-of-type{ float:right; }

    ...

      Html

       <div id='one'> Text 1 </div> <div id='two'> Текст 2 </div>

      CSS

       #one, #two { position: absolute; top: 10px; left: 10px; }